27 октября 2013
3536
всплывающие подсказки на CSS, подсказки на сайте, подсказки при наведении

Всплывающие подсказки на CSS

CSS
Демонстрация » Скачать »

Очень важный шаг в разработке контента сайта, это наверно его улучшение с помощью правильной структуры. Ведь правильно составленный текст, который будет удобно читать и понимать, - важнейшая часть основы любого сайта. Сегодня мы поговорим о всплывающих подсказках на CSS. В основном, подсказки бывают двух видов: первый на CSS, второй на JavaScript. Мы разберем же самый простой на мой взгляд вид - это на CSS

 

 

ШАГ ПЕРВЫЙ. HTML.

 

Создадим всплывающую подсказку в виде ссылки, которая будет при наведении показывать текст подсказки, а при нажатии на нее, будем переходить на сайт, на который указана ссылка. Сначала создаем тег a и прописываем ему класс help, после него пишем ключевые слова для ссылки.

Далее идет тег span, которому прописываем класс help_text. Внутри контейнера тега span, пишем текст, который будет иметь связь с ключевыми словами тега a.

 

<a href="Ссылка" class="help"> 
  Текст ссылки
   <span class="help_text">
     Текст подсказки
   </span>
</a>

 

 

ШАГ ВТОРОЙ. CSS.

 

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; 
}

 

 

Надеюсь, данный материал помог Вам правильно воспользоваться всплывающими подсказками на своем ресурсе! Благодарю за внимание! Всем удачи!