Псевдокласс :hover

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	1.0+	1.0+

Краткая информация

Применяется	Не определено
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

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

Порядок последовательности

a:link {
Свойство ( а ).
}
a:visited {
Свойство ( а ).
}
a:hover {
Свойство ( а ).
}
a:focus {
Свойство ( а ).
}
a:active {
Свойство ( а ).
}

Псевдокласс применим ко всем элементам,создан в версии CSS2 и проходит валидацию согласно версии CSS3.

Синтаксис

элемент:hover { ... }

Значения

Нет.

Пример 1

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>hover</title>
 <style>
 a:link {
 color: #0000d0; /* Цвет ссылок */
 padding: 2px; /* Поля вокруг текста */ 
 }
 a:hover {
 background: #786b59; /* Цвет фона под ссылкой */ 
 color: #ffe; /* Цвет ссылки */ 
 } 
 </style>
 </head>
 <body>
 <p><a href="1.html">Ссылка 1</a></p>
 <p><a href="2.html">Ссылка 2</a></p>
 <p><a href="3.html">Ссылка 3</a></p> 
 </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат примера показан ниже.

Пример 2

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>hover</title>
 <style>
 ul {
 width: 180px; /* Ширина меню */
 list-style: none; /* Для списка убираем маркеры */
 margin: 0; /* Нет отступов вокруг */
 padding: 0; /* Убираем поля вокруг текста */
 font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
 font-size: 10pt; /* Размер названий в пункте меню */
 }
 li ul {
 position: absolute; /* Подменю позиционируются абсолютно */
 display: none; /* Скрываем подменю */
 margin-left: 165px; /* Сдвигаем подменю вправо */
 margin-top: -2em; /* Сдвигаем подменю вверх */
 }
 li a {
 display: block; /* Ссылка как блочный элемент */
 padding: 5px; /* Поля вокруг надписи */
 text-decoration: none; /* Подчеркивание у ссылок убираем */
 color: #666; /* Цвет текста */
 border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
 background-color: #f0f0f0; /* Цвет фона */
 border-bottom: none; /* Границу снизу не проводим */
 }
 li a:hover {
 color: #ffe; /* Цвет текста активного пункта */
 background-color: #5488af; /* Цвет фона активного пункта */
 }
 li:hover ul { 
 display: block; /* При выделении пункта курсором мыши отображается подменю */
 }
 .brd {
 border-bottom: 1px solid #ccc; /* Линия снизу */
 }
 </style>
 </head>
 <body>
 <ul class="menu">
 <li><a href="russian.html">Русская кухня</a>
 <ul> 
 <li><a href="linkr1.html">Бефстроганов</a></li> 
 <li><a href="linkr2.html">Гусь с яблоками</a></li> 
 <li><a href="linkr3.html">Крупеник новгородский</a></li> 
 <li><a href="linkr4.html" class="brd">Раки по-русски</a></li> 
 </ul> 
 </li> 
 <li><a href="ukrainian.html">Украинская кухня</a> 
 <ul> 
 <li><a href="linku1.html">Вареники</a></li> 
 <li><a href="linku2.html">Жаркое по-харьковски</a></li> 
 <li><a href="linku3.html">Капустняк черниговский</a></li> 
 <li><a href="linku4.html" class="brd">Потапцы с помидорами</a></li> 
 </ul> 
 </li>
 <li><a href="caucasus.html">Кавказская кухня</a> 
 <ul> 
 <li><a href="linkc1.html">Суп-харчо</a></li> 
 <li><a href="linkc2.html">Лилибдж</a></li> 
 <li><a href="linkc3.html">Чихиртма</a></li> 
 <li><a href="linkc4.html" class="brd">Шашлык</a></li> 
 </ul> 
 </li> 
 <li><a href="asia.html" class="brd">Кухня Средней Азии</a></li> 
 </ul>
 </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат примера показан ниже.

Пример 3

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдокласс :hover</title>
<style type="text/css">
<!--
div#color {
width:100px;
height:50px;
padding:10px;
background:black;
border:10px double red;
font-weight:bold;
color:white;
}
div#perehod {
width:100px;
height:50px;
padding:10px;
background:indigo;
border:10px double blue;
font-weight:bold;
color:white;
transition:width 5s 3s 1s;
-moz-transition:width 5s 3s 1s;
-webkit-transition:width 5s 3s 1s;
-o-transition:width 5s 3s 1s;
}
div#color:hover {
background:red;
border:10px double black;
}
div#perehod:hover {
width:300px;
}
-->
</style>
</head>
<body>
<div id="color">М Е Н Я Е М</div>
<br>
<div id="perehod">УДЛИННЯЕМ</div>
</body>
</html>

Результат примера 3.

Браузеры

В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Псевдоклассы | Добавил: evkuriy (07.07.2013)

Просмотров: 587 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]