Очень важный шаг в разработке контента сайта, это наверно его улучшение с помощью правильной структуры. Ведь правильно составленный текст, который будет удобно читать и понимать, - важнейшая часть основы любого сайта. Сегодня мы поговорим о всплывающих подсказках на CSS. В основном, подсказки бывают двух видов: первый на CSS, второй на JavaScript. Мы разберем же самый простой на мой взгляд вид - это на CSS.
Создадим всплывающую подсказку в виде ссылки, которая будет при наведении показывать текст подсказки, а при нажатии на нее, будем переходить на сайт, на который указана ссылка. Сначала создаем тег a и прописываем ему класс help, после него пишем ключевые слова для ссылки.
Далее идет тег span, которому прописываем класс help_text. Внутри контейнера тега span, пишем текст, который будет иметь связь с ключевыми словами тега a.
<a href="Ссылка" class="help">
Текст ссылки
<span class="help_text">
Текст подсказки
</span>
</a>
a.help{
position:relative;
z-index:1;
color: blue;
text-decoration: none;
}
a.help:hover{
color: red;
text-decoration: none;
}
a.help span{
display: none;
}
a.help:hover span.help_text{
display:block;
position:absolute;
top:25px;
left:0;
padding: 5px;
background: #c3caff;
border: 1px solid black;
width:200px;
color: black;
font-size: 14px;
text-align: justify;
}
Надеюсь, данный материал помог Вам правильно воспользоваться всплывающими подсказками на своем ресурсе! Благодарю за внимание! Всем удачи!