CSS -- Выпадающие подсказки
Подведите мышку к ссылкам справа и посмотрите, что происходит. Вы, наверное, немного взбодритесь, если узнаете, что
тут не использовано ни единой строчки javascript. :) Что-то подобное произошло со мной, когда я впервые увидел этот пример.
Это должно быть вдвойне интересно дизайнерам, у которых нету на соседнем кресле специалиста по DHTML.
Как это работает
В каждую ссылку вложен элемент span, который и содержит текст подсказки. Фрагмент кода:
<a href="http://www.flash-ripper.com/">Флэш-Потрошитель <span>Один из лучших русскоязычных сайтов по флеш технологиям.
Ежедневные новости. Статьи. Примеры.</span></a>
Чтобы изначально текст подсказки не был виден, для нее сделан стиль:
div#links a span{ display: none; }
Теперь самое интересное. Для того, чтобы показать подсказку при наведении на ссылку, для span сделан такой стиль:
div#links a:hover span{
display:block;
position: absolute;
top: 160px;
left: 14px;
width: 160px;
font-family: Arial Narrow, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
Другими словами, нам ничего не мешает для элементов, вложенных в ссылку, использовать контекстуальный селектор для "отлавливания" наведения
мышки и переназначения стиля. Согласитесь это очень любопытная возможность.
Абсолютное позиционирование здесь использовано, чтобы не наследовать положение родителя, а спозиционировать элемент как нам нужно.
Также важно чтобы стиль для a:hover был явно задан в таблице стилей, иначе селектор
div#links a:hover span не будет работать, потому что для стилей не существует событий.
Ограничение этого метода видно само собой - мы можем изменять динамически стили только для элементов, вложенных в ссылку.
Где это работает
Это будет работать в браузере который понимает контекстуальные селекторы и который корректно подерживает позиционирование.
Я просмотрел этот пример в ИЕ6, Мозилле, Opere 7, Netscape 7, и нигде беды не обнаружил.
По материалам статьи Pure CSS Popups
Перевод: rooc.
Вернуться на главную страницу Ф. Потрошителя
