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

Дата Автор 

Всем привет! Сегодняшним CSS уроком, будет добавление всплывающих подсказок к ссылкам с помощью CSS.

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

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

 

Для начала как обычно, давайте рассмотрим код всплывающей подсказки:

 

<html>
<head>
<style type="text/css">
.ask { position:relative; z-index:1; }
.ask span {display: none;}
.ask:hover {z-index:2;}
.ask:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#cbd4e1;
border:1px solid #0039a6;
padding:5px;
font-size:11px;
color:#000;
text-decoration:none;
font-family: Verdana;
}
</style>
</head>
<body>
Определение <a href="#" class="ask" target="_blank"><span>комплекс мер для улучшения видимости сайта в результатах выдачи 
 
поисковых систем по определенным запросам пользователей с целью продвижения сайта</span>SEO</a><br><br>
 
Ссылка на мой блог  <a href="http://www.workwebsite.ru" class="ask" target="_blank"><span>Ссылка на блог workwebsite</span> 
 
SEO</a>
</body>
</html>

Демонстрация

 

До параметра width:120px; установлены настройки для скрытия окна с подсказкой, и если вы надумаете редактировать код, то не вздумайте менять что-то до width. Если вы разбираетесь в CSS, то с легкостью сможете переделать внешний вид всплывающей подсказки, изменив цвета и размеры, по вашему желанию.

 

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

 

<a href="#" class="warning" target="_blank"><span>Внимание!!!</span>Текст</a>

<a href="#" class="definition" target="_blank"><span>Определение</span>Текст</a>

<a href="#" class="description" target="_blank"><span>Описание</span>Текст</a>

 

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

Оцените материал
(1 Голосовать)
 

You have no rights to post comments