![CSS1](../images/css1-n.png)
![CSS2](../images/css2-y.png)
![CSS2.1](../images/css21-y.png)
![CSS3](../images/css3-y.png)
![IE](../images/br-ie-y.png)
![Chrome](../images/br-cr-y.png)
![FireFox](../images/br-ff-y.png)
![Opera](../images/br-op-y.png)
![Safari](../images/br-sf-y.png)
:hover
Псевдокласс CSS :hover используется для изменения стилей элементов, в момент наведения на них курсора мыши. Например, это могут быть ссылки, кнопки или обычные изображения.
Тип псевдокласса
Назначение: псевдоклассы.
Применяется: В CSS не определено к каким элементам можно применять псевдокласс :hover, но все браузеры его поддерживают для тега <A>, также многие поддерживают и для других тегов, например, <DIV>.
Псевдокласс :hover должен указываться перед :active, если тот присутствует. А если он используется для ссылок то после :link и :visited. В противном случае :hover может не сработать.
Значения
Нет.
Синтаксис
селектор:hover { }
Пример CSS: использование :hover
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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="https://spravka.seodon.ru/css/">Справочник CSS</a></p>
<p><a href="https://spravka.seodon.ru/html/">Справочник HTML</a></p>
</body>
</html>
Результат. Использование псевдокласса CSS :hover.
![Использование псевдокласса CSS :hover Использование псевдокласса CSS :hover](images/hover.png)
Версии CSS
Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
Поддержка: | Нет | Нет | Нет | Да |
Браузеры
Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
Поддержка: | Да | Да | Да | Да | Да |