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

| WEBMASCON - журнал для веб-мастеров обновление |2004.02.07

| Вёрстка

Начало
Темы
Архив
Daily
Персоналии
Форумы
Отзывы
О сайте

все статьи на тему Вёрстка

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

© Copyright 9 апреля 2002 Михаил Дубаков © перевод, n|a распечатать

Идея описана на сайте всем известного Эрика Мейера
http://www.meyerweb.com/eric/css/edge/popups/demo.html.

Эрик Мейер нашел очень интересное использование псевдо-класса :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>`

Сейчас самое интересное. На элемент А и на элемент 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-анатомия | рус.

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

что это такое?

Рекомендую

Михаил Дубаков
Создание Web-страниц. Искусство верстки
на http://www.ozon.ru/context/detail/id/1590005/?partner=webmascon
на http://www.books.ru/shop/books/149089?partner=webmascon
Почитайте Главу 7
Почитайте Главу 9

Рекомендую

Михаил Дубаков
Веб-мастеринг средствами CSS
на http://www.ozon.ru/context/detail/id/1099692/?partner=webmascon
на http://www.books.ru/shop/books/27425?partner=webmascon
Почитайте Главу 5
Отзывы о книге

Начало | Темы | Архив | Daily | Персоналии | Форумы | Отзывы | О сайте

|  | Автор и администратор ресурса - Александр Качанов Webmascon Project открыт в 1999 году
© 1999-2002, переводы, Александр Качанов © 1999-2002, Webmascon © дизайн | matepuana.com |  |
подробнее |