hover

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Да Да Да Да Да Да Да Да Да Да Да Да Да

 

CSS CSS2
Применяется Не определено
Аналог HTML <тег onmouseover="function()">

Описание

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

Синтаксис

E:hover { ... }

Здесь E имя селектора. Если селектор не указан, то hover применяется ко всем элементам документа.

Значения

Нет.

Пример 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>   <meta http-equiv="Content-Type" content="text/html;    charset=windows-1251">   <title>link</title>   <style type="text/css">    a:link {     color: #0000d0; /* Цвет ссылок */     padding: 2px; /* Поля вокруг текста */     }    a:hover {     background: #786b59; /* Цвет фона под ссылкой */      color: #ffe; /* Цвет ссылки */     }    </style>  </head>  <body>    <p><a href="/link1.html">Ссылка 1</a></p>   <p><a href="/link2.html">Ссылка 2</a></p>   <p><a href="/link3.html">Ссылка 3</a></p>    </body> </html>

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

Пример 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>   <meta http-equiv="Content-Type" content="text/html;    charset=windows-1251">   <title>hover</title>   <style type="text/css">    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 id="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>) для создания двухуровневого меню.

Браузеры

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