Поиск:

Необычное применение CSS: реализация эффекта rollover c помощью CSS

Идея описана на сайте всем известного Эрика Мейера
www.meyerweb.com/eric/.

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом.

Замечание: Эффект rollover элементарно реализуется с помощью JavaScript. Например здесь объясняется, как сделать прелодер и сам rollover. Код вообще хороший, но достаточно большой.

Для начала создаем обычную ссылку, скажем, вот такую

<a href="index.php">новости</a>

Затем берем картинку, которая должна показываться при неведении мышкой на ссылку, заключаем ее в теги <span></span> и помещаем всю эту конструкцию внутрь ссылки. Получается вот так:

<a href="index.php">
<span><img src="/i/css/button.gif" border="0" alt=""/>
</span>новости</a>

Сейчас самое интересное. На элемент a и на элемент span, вложенный в a, пишем такие стили:

a {
 display: inline}

a span {
 display: none}

a:hover span {
 display: inline;
 position: absolute;
 left: 400px}

a:hover {
 color: #F90
 border: 0px;}

Фактически получается вот что. В обычном состоянии содержимое элемента span внутри ссылки не отображается, что реализуется с помощью строчки

a span {
 display: none}

При наведении же, значение свойства display изменяется на inline и содержимое элемента span позиционируется в нужное место (в нашем примере на 100 пикселей левее ссылки)

a:hover span {
 display: inline;
 position: absolute;
 left: 400px}

Вот собственно и все!

Пример:

новости

Надо заметить, что css-rollover работает в браузерах Netscape 6, Mozilla 0.9.x, MSIE 5.5-6, так что на полноценную замену JavaScript'овой не тянет. Однако не за горами то время, когда подавляющее большинство будет пользоваться MSIE 5.5-6, так что в принципе можно в некоторых случаях пользоваться именно CSS, а не JavaScript. Проще и удобнее.

« назад к списку статей

Рекомендую

Михаил Дубаков Создание Web-страниц. Искусство верстки Сравните цены: на www.ozon.ru на www.books.ru на www.oz.by Почитайте Главу 7 Почитайте Главу 9

Рекомендую

Михаил Дубаков Веб-мастеринг средствами CSS Сравните цены: на www.ozon.ru на www.books.ru на www.oz.by Почитайте Главу 5 Отзывы о книге