[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / CSS /

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

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

Автор: Михаил Дубаков



Комментарии

sfetfivmdlj
29-07-2011   
B6rjSf <a href="http://yykuypjuqncl.com/">yykuypjuqncl</a>

arkani
26-07-2011   
brK3cY <a href="http://tlwcmmxkdurc.com/">tlwcmmxkdurc</a>

Etta
26-07-2011   
One or two to remmeber, that is.

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 3334 сегодня - 0

История про CSS (часть II)
05-01-2010   

Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее

Кол. просмотров: общее - 3333 сегодня - 0

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 3176 сегодня - 0

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

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

Кол. просмотров: общее - 3202 сегодня - 0

Сокращенные команды в CSS
05-01-2010   

Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее

Кол. просмотров: общее - 3948 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects