Справочник по 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

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms530766(VS.85).aspx

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования