Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

:hover

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

Тип псевдокласса

Назначение: псевдоклассы.

Применяется: В CSS не определено к каким элементам можно применять псевдокласс :hover, но все браузеры его поддерживают для тега <A>, также многие поддерживают и для других тегов, например, <DIV>.

Псевдокласс :hover должен указываться перед :active, если тот присутствует. А если он используется для ссылок то после :link и :visited. В противном случае :hover может не сработать.

Значения

Нет.

Синтаксис

селектор:hover {  }

Пример CSS: использование :hover

<!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=utf-8">
  <title>seodon.ru - CSS псевдокласс :hover</title>
  <style type="text/css">
   a:link    { color:#0066cc } /* цвет непосещенных ссылок */
   a:visited { color:#0066cc } /* посещенных */
   a:hover   { color:#66cc00 } /* ссылок под курсором */
   a:active  { color:#ff0000 } /* в момент активации */
  </style>
 </head>
 <body>
  <p><a href="http://spravka.seodon.ru/css/">Справочник CSS</a></p>
  <p><a href="http://spravka.seodon.ru/html/">Справочник HTML</a></p>
 </body>
</html>

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

Результат. Использование псевдокласса CSS :hover.

Использование псевдокласса CSS :hover

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа