Всплывающие подсказки на CSS
Уроки Всплывающие подсказки на CSS
27 октября 2013
1125
всплывающие подсказки на 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; 
}

 

 

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





Роман Краутер