:hover

Описание

CSS псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link, :visited и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited, но после :active, как определено в LVHA-порядке: :link:visited:hover:active.

Псевдокласс :hover может применяться к любому псевдоэлементу.

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

Замечания по использованию: на сенсорных экранах :hover проблемный или не работает. В зависимости от браузера, псевдокласс :hover может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.

Примеры

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Выпадающее меню

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники - создание правил, типа следуюшего:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

применим к HTML структуре типа следующей:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Меню</a>
      <ul>
        <li>
          <a href="example.html">Ссылка</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Подменю</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Подменю</a>
              <ul>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
              </ul>
            </li>
            <li><a href="example.html">Ссылка</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Смотрите наш полный пример выпадающего меню, основанный на CSS.

Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс :hover, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Замечания: Для аналагичного эффекта, но основанного на псевдоклассе:checked (применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.

Спецификации

Спецификация Статус Комментарий
WHATWG HTML Living Standard
Определение ':hover' в этой спецификации.
Живой стандарт  
Selectors Level 4
Определение ':hover' в этой спецификации.
Рабочий черновик Может применяться к любым псевдоэлементам.
Selectors Level 3
Определение ':hover' в этой спецификации.
Рекомендация Без значительных изменений.
CSS Level 2 (Revision 1)
Определение ':hover' в этой спецификации.
Рекомендация Изначальное определение.

Поддержка браузерами

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
для <a> элементов 0.2 1.0 (1.7 или ранее) 4.0 4.0 2.0.4 (419)
различные ошибки до этой версии
для всех элементов 0.2 1.0 (1.7 или ранее) 7.0 7.0 2.0.4 (419)
различные ошибки до этой версии
для псевдоэлементов ? 28 (28) ? ? ?
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? ? ? ? ?

В IE8-11, наведя курсор на элемент, прокручивая вверх/вниз, без перемещения курсора, элемент останется в состоянии :hover, пока курсор не передвинут. Смотрите IE баг 926665.

В IE9 (и возможно ранее), если у <table> есть родитель с width, установленной не в auto и overflow-x: auto;, а у <table> столько контента, что он переполняет родителя по горизонтали, а также есть :hover стили, установленные на элементы в таблице, то при наведении на указанные элементы будет увеличиваться высота <table>. Вот живой пример, которой иллюстрирует этот баг. Один из способов исправления, установление min-height: 0%; на родителя таблицы (должны быть указаны %, 0 и 0px не работают). Баг подняли в jQuery ticket #10854, но его закрыли, так как это не ошибка jQuery.

На Safari Mobile for iOS 7.1.2, нажатие на кликабельный элемент вызывает переход элемента в состояние :hover,  и элемент остаётся в нём, пока другой элемент не войдёт в состояние :hover.

Смотрите также:

Метки документа и участники

 Внесли вклад в эту страницу: BychekRU
 Обновлялась последний раз: BychekRU,