Страницы

Поиск по вопросам

пятница, 14 декабря 2018 г.

Как сверстать облако тегов на css?

Сейчас готов кусок 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) }


Комментариев нет:

Отправить комментарий