css Всплывающая подсказка на чистом CSS 

Дата публикации  Дата изменения09.02.13  КомментарииНет   Просмотры4563

Курсы

Всплывающая подсказка создана на чистом CSS и не требует дополнительных библиотек или плагинов.
Конечно же, отображение и эффекты тут ограничены, но все равно она может быть полезной для создания легкой в загрузке страницы.

HTML код:


<ul> 
   <li><a href="http://www.google.com"><span>Google.com</span></a></li> 
   <li><a href="http://www.yahoo.com"><span>Yahoo.com</span></a></li> 
   <li><a href="http://www.cssbeauty.com"><span>CSSBeauty.com</span></a></li> 
</ul>

Все что находится в теге span – является подсказкой.

CSS:

В нашем примере используются иконки, у которых есть подсказки, и вот их базовый css код:



#miniadv ul{margin:0;padding:0;list-style:none}
#miniadv ul li {float:left;margin:0 2px 2px 0}
#miniadv a{float:left;position:relative;z-index:5; width:18px;height:18px}
#miniadv a:hover{z-index:10}
#miniadv a span{display:none}
#miniadv a:hover span {display:block;position:absolute; bottom:2em;right:2em;width:135px}

  Размер:  8,54kB | Изменен:  7.01.13 | Загрузок: 152
Бесплатные курсы

Категории

Теги: , ,

Оцените материал:

Рейтинг: 9.0/10 (2)


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

Нет комментариев к этой статье.


 

Старые →← Новые