Описание
Новая версия Cascading Style Sheets Level 2 Proposed Recommendation (CSS2) включает в себя новый , динамический псевдокласс :hover -- он возникает когда пользователь навел указатель (например мыши) на элемент но не активизировал его.
Когда :hover применяется к элементу, то получается тот же эффект что и при использовании событий mouseover, и mouseout. Для обработки событий mouseover, и mouseout обычно используются скрипты , которые подменяют текущий стиль на новый (событие mouseover) и затем возвращают стиль обратно (событие mouseout).
Используя:hover, можно организовать подобную замену стиля элемента без использования скриптов и следовательно уменьшить HTML объем.
В настоящее время (на момент написания данной статьи) класс :hover работает только в Explorer 4 (и выше) и только для тега A с элементом HREF. (См. Microsoft documentation in the Internet SDK)
Синтаксис
|
где
|
Например для изменения цвета "нормального" красного линка в синий при проведении над ним курсора мыши достаточно прописать всего лишь одну строчку в STYLE:
<STYLE TYPE="text/css">A:hover {color:blue}
</STYLE>
Применив использование стилей к линку например таким образом
<STYLE TYPE="text/css">A {color:red;font-family:sans-serif;font-weight:bold;font-size:14pt;text-decoration:none;}
A:hover {color:blue}
</STYLE>
В результате получается весьма привлекательный линк: AvisO Page
Пример "Горизонтальное меню"Теперь сделаем более сложный и следовательно красивый эффект с использованием стилей.Опишем стиль. Для класса hover зададим белый цвет линка и фон лиловый
<STYLE TYPE="text/css">A.wr {color:blue;font-size:10pt;font-weight:bold;font-family:Arial;text-decoration:none;}
A.wr:hover {color:white;background-color:purple;}
</STYLE>
Теперь сам пример .Его результаты впечатляют (по крайней мере меня). Всем ссылкам даем имя вышеописанного стиля и помещаем все в тег div Простое добавление опции border в тег DIV позволяет получить Image-подобную полоску (а-ля меню) с ссылками
<CENTER><DIV STYLE="width:400;border:1px #D00000 solid">
<A CLASS=wr HREF="https://avisop.tripod.com/"> Home </A>
<A CLASS=wr HREF="https://avisop.tripod.com/"> WEB </A>
<A CLASS=wr HREF="https://avisop.tripod.com/"> SQL </A>
<A CLASS=wr HREF="https://avisop.tripod.com/"> Сети </A>
<A CLASS=wr HREF="https://avisop.tripod.com/"> Hodjt </A>
<A CLASS=wr HREF="https://avisop.tripod.com/"> Разное </A>
</DIV>
</CENTER>
Если принять во нимание что для DIV в стилях можно прописывать цвет и толщину для каждой из границ то возможности улучшения "зрибельных" эффектов можно развивать и далее.
Пример "Вертикальное меню"И в заключение еще один весьма эффектный пример
WEB
SQL
Сети
Новое
Разное
Описываем стиль . Заметьте что используется моноширинный шрифт (для получения ровных горизонтальных границ). Для класса :Hover задаем белый цвет, лиловый фон , и изменяем межбуквенное расстояние (по умолчанию 0Px)
<STYLE TYPE="text/css">A.menu {color:white;font-weight:bold;font-size:12pt;font-family:monospace;text-decoration:none;background-color:#D00000;}
A.menu:hover {color:white;letter-spacing:1px; background-color:purple;}
</STYLE>
Эффект расширения возникает за счет изменения letter-spacing на один пиксел.Число символов в каждой строке "меню" д.б. одинаковым .Недостающие символы дополняются пробелами
<A CLASS=menu HREF="https://avisop.tripod.com/"> home  </A><BR><A CLASS=menu HREF="https://avisop.tripod.com/"> WEB   </A><BR>
<A CLASS=menu HREF="https://avisop.tripod.com/"> SQL   </A><BR>
<A CLASS=menu HREF="https://avisop.tripod.com/"> Сети  </A><BR>
<A CLASS=menu HREF="https://avisop.tripod.com/"> Новое </A><BR>
<A CLASS=menu HREF="https://avisop.tripod.com/"> Разное</A>
Пример "Большие Буквы"
Еще один интересный эффект возникает при применении опции CSS text-transform:uppercase;. При этом при проведении курсором над линком весь текст прописанный в линке будет преобразовываться в большие буквы
<STYLE TYPE="text/css">A:hover {color:blue;text-transform:uppercase;}
</STYLE>
AvisO Page