Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
Помогли мы вам |
Представленный tooltip действительно очень прост. Для его реализации не требуется javascript. Только CSS.
Описывать совершенно нечего, поэтому просто код:
a:hover {
background : #ffffff; /*необходимо для IE6*/
text-decoration : none;
}
a.tooltip span {
display
: none;
padding
: 2px 3px;
margin-left : 8px;
width
: 130px;
}
a.tooltip:hover span {
display
: inline;
position : absolute;
background : #ffffff;
border
: 1px solid #cccccc;
color
: #6c6c6c;
}
Теперь, чтобы добавить к ссылке подсказку, присвойте ей класс tooltip, а текст подсказки добавьте
в span-е внутри этой ссылки.
Простейший Tooltip<span>Вот такая подсказочка получилась :).</span>.
Простейший TooltipВот такая подсказочка получилась :)..
Проверено с
IE5, IE 5.5, IE 6, IE7, Safari 3.1, последними версиями Firefox и Opera.
|
|