Сейчас готов кусок html и css к нему, но верстка не соответствует макету и непонятно, как сделать hover при наведении и всплывающую подсказку над тегом.
.tags {
padding: 80px;
width: 380px;
/* Style for "jQuery" */
color: #ffffff;
font-family: Roboto;
font-size: 17px;
font-weight: 300;
line-height: 40px;
}
.tags a {
white-space: nowrap;
/* Style for "Rounded Re" */
width: auto;
border-radius: 13px;
background-color: #090a0b;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #ffffff;
}
При этом на выходе должно получится облако тегов с возможностью раскрыть его и при наведении hover с подсказкой https://yadi.sk/i/t7ATcCq23SqXoq
Ответ
ну вот как вариант
body {
background: #1e2429;
}
.tags {
padding: 80px;
width: 380px;
/* Style for "jQuery" */
color: #ffffff;
font-family: Roboto;
font-size: 17px;
font-weight: 300;
line-height: 40px;
}
.tags a {
white-space: nowrap;
/* Style for "Rounded Re" */
width: auto;
border-radius: 13px;
background-color: #090a0b;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #ffffff;
position: relative; /* для подсказки */
}
/* это нужно, если есть необходимость что бы можно было навести курсор на подсказку. Иначе будет исчезать */
.tags a:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 20px;
visibility: hidden;
}
.tags a:hover:after {
visibility: visible;
}
.tags a:hover {
background: #eb1f63;
}
/* оформление плашки */
.tags__hide {
position: absolute;
left: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
color: #000;
background: #fff;
padding: 5px 10px;
line-height: 1;
transition: all .3s;
/* параметры для изчезновения/появления. Можете настроить как вам угодно */
visibility: hidden;
opacity: 0;
bottom: 0;
}
.tags a:hover .tags__hide {
visibility: visible;
opacity: 1;
bottom: calc(100% + 15px);
}
/* треугольник */
.tags__hide:before {
content: '';
width: 10px;
height: 10px;
background: #fff;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
transform: rotate(45deg)
}
Комментариев нет:
Отправить комментарий