Наш следующий урок CSS посвящён созданию всплывающих подсказок на чистом CSS. Этот метод - один из самых простых, но не самый удобный.
Главный недостаток этого метода в том, что он основывается на теге span, который часто используется для других целей.
Итак...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
.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);
}
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="tooltip">
<a href="#">текст ссылки<span>пояснение к ссылке</span></a>
</div>
</body>
</html>
4) Сохраняем и смотрим, что получилось.
Вот и всё... Метод оказался действительно простым в понимании, оформлении и использовании. Из особенностей, пожалуй только эффект прозрачности.
Совместимость: Internet Explorer 5.5 - 7 (полностью); Mozilla Firefox 2.xx (полностью); Oprea 7.хх - 9.xx (возможны искажения)
ДемоПо материалам сайта:
Российская школа CSS
