Справочник по CSS : Тематический указатель : Псевдоклассы : :hover
смотрим также
Материал из Справочник Web-языков
Содержание |
Псевдокласс :hover
Задает стиль элемента, на который наведен курсор мыши.
Синтаксис
HTML | :hover { sRules } |
Скрипты | N/A |
Используемые значения
- sRules
- Строковое значение, которое определяет одну или более CSS-пару атрибут/значение.
Замечания
Наведение означает, что пользователь расположил курсор мыши на объекте, но не кликнул по нему или еще не активировал его каким-либо другим способом. Псевдокласс :hover изменяет стиль объекта, когда на него наведен курсор мыши. Как только пользователь убрал курсор мыши - стиль объекта снова становится прежним.
Псевдокласс :hover часто используется вместе с другими псевдоклассами :active, :link и :visited, предназначенными для задания стиля ссылкам. Причем, важен порядок описания псевдоклассов. Стилевое правило для :hover должно идти после стилевых правил для :link и :visited, чтобы псевдоклассы не перекрывали друг друга.
В Internet Explorer 6.0 и более ранних версиях псевдокласс :hover применяется только для ссылок.
Начиная с Internet Explorer 7.0 добавилась поддержка и других объектов для псевдокласса :hover.
Необдуманное и беспорядочное использование псевдокласса :hover может существенно замедлить загрузку web-страницы.
Примеры
В первом примере задается стиль якорной ссылки с помощью псевдокласса :hover. При наведении на нее, текст станет красным, жирным и изменится цвет фона.
<style> a:hover { color:red; background-color:beige; font-weight:bolder; } </style> <a href="#below">Кликните здесь, чтобы перейти вниз страницы.</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <a name="below"></a>
Во втором примере показано как применять псевдокласс :hover для различных элементов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html> <head> <style type="text/css"> body:hover { background: url("wlbigielogo.gif") no-repeat center center; } h1:hover { color: red; } img { vertical-align: middle; } .zoom img { zoom: 0.5; } img:hover { zoom: 1.0; cursor: hand; } img.spacer { width: 0px; height: 30px; } </style> </head> <body> <h1>Наведите курсор вот сюда.</h1> <img class="spacer" src="blank.gif"> <span class="zoom"> <img src="A.gif"> <img src="B.gif"> <img src="C.gif"> . . . <img src="X.gif"> <img src="Y.gif"> <img src="Z.gif"> </span> </body></html>
Стандарты
Этот псевдокласс определен в CSS, Level 2 Revision 1 (CSS2.1)
Поддерживаемые браузеры
Internet Explorer 7.0, 8.0 (в версиях 6.0 и ниже поддерживается частично)
Opera 7.0, 8.0, 9.2, 9.5, 10.0
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms530766(VS.85).aspx