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

Администратор · Регистрация: 27.02.2009

Создадим всплывающие подсказки на чистом CSS. Этот метод - один из самых простых, но не самый удобный...

Главный недостаток этого метода в том, что он основывается на теге span, который зачастую применяется для других целей.

Ну что ж, поехали...

Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css;

Вставьте в этот файл следующий код (подробнее о командах - в коде):

PHP код:



.tooltip {
     margin: 50px;
}

.tooltip a {
     text-decoration:none;
     color:#333;
}


.tooltip a:hover {
     position:relative; /* Установка позиции для отступов */
}

.tooltip a span {
     display:none; /* Запрет показа подсказки без наведения */
}

.tooltip a:hover span{
     font-size:8pt; /* Задание размера шрифта подсказки */
     display:block; /* Задание показа подсказки */
     position:absolute; /* Задание положения подсказки */
     top:-15px; /* Задание отступов */
     left:50px;
     background:#65b5ff; /* Задание цвета фона подсказки */
     border:1px solid #002649; /* Задание границы поля подсказки */
     color:#fff; /* Задание цвета шрифта подсказки */
     width:110px; /* Задание ширины поля подсказки */
     padding:5px;
     opacity: 0.8; /* Задание прозрачности поля подсказки */
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

Чтобы увидеть работу стилей, создадим в той же дирректории html-файл и, например, вставим туда такой код:

PHP код:



<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="tooltip">
<a href="#">текст ссылки<span>пояснение к ссылке</span></a>
</div>
</body>
</html>

Сохраняем и смотрим, что получилось.

Заключение

Вот и всё... Метод оказался действительно простым в понимании, оформлении и использовании (хотя для новичков, на первый взгляд, он покажется довольно сложным). Из особенностей, пожалуй только эффект прозрачности.

Совместимость: Internet Explorer 5.5 - 7 (полностью); Mozilla Firefox 2.xx (полностью); Oprea 7.хх - 9.xx (возможны искажения);

Источник: CSS-School.ru

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид