|
Главная Скачать (Download) Dreamweaver CS6 Dreamweaver CS5 Dreamweaver CS4 Dreamweaver 8 Dreamweaver MX 2004 - Рабочая область
Dreamweaver 4- Создание/ открытие документов - Настройка сайта - Компоновка страниц с CSS - Табличный контент - Шаблоны в MX 2004 - Работа с страницами - Настройка серверных приложений - Рабочая область для динамических страниц Уроки (Tutorials) Видеоуроки new!!! Fireworks ЧаВо Документация Статьи Программы и скрипты Бесплатные шаблоны Каталог сайтов Форум Карта сайта Контакты |
Необычное применение CSS: реализация эффекта rollover c помощью CSS Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом. Замечание:
Эффект rollover элементарно реализуется с помощью JavaScript.
Например Для начала создаем обычную ссылку, скажем, вот такую
Затем
берем картинку, которая должна показываться при неведении мышкой на
ссылку, заключаем ее в теги <SPAN></SPAN> и
помещаем всю эту конструкцию внутрь ссылки. Получается вот
так: Сейчас самое интересное. На элемент А и на элемент SPAN, вложенный в A, пишем такие стили:
Фактически получается вот что. В обычном состоянии содержимое элемента SPAN внутри ссылки не отображается, что реализуется с помощью строчки
При наведении же, значение свойства display изменяется на inline и содержимое элемента SPAN позиционируется в нужное место (в нашем примере на 100 пикселей левее ссылки)
Вот собственно и все! Надо заметить, что css-rollover работает в браузерах Netscape 6, Mozilla 0.9.x, MSIE 5.5-6, так что на полноценную замену JavaScript'овой не тянет. Однако не за горами то время, когда подавляющее большинство будет пользоваться MSIE 5.5-6, так что в принципе можно в некоторых случаях пользоваться именно CSS, а не JavaScript. Проще и удобнее. Автор: Михаил Дубаков
Реклама |
|
|