2018-10-12 16:00:59 -04:00
---
title: Hover Selector
2019-04-22 22:39:17 +05:00
localeTitle: Псевдокласс :hover
2018-10-12 16:00:59 -04:00
---
2019-04-22 22:39:17 +05:00
## Псевдокласс :hover
2018-10-12 16:00:59 -04:00
2019-04-22 22:39:17 +05:00
Селектор CSS `:hover` является одним из многих псевдоклассов, используемых для стилизации элементов.
2018-10-12 16:00:59 -04:00
2019-04-22 22:39:17 +05:00
Селектор CSS `:hover` используется для выбора элементов при наведении на них курсора мыши.
2018-10-12 16:00:59 -04:00
2019-04-22 22:39:17 +05:00
Селектор CSS `:hover` можно использовать для всех элементов, а не только для ссылок.
2018-10-12 16:00:59 -04:00
2019-04-22 22:39:17 +05:00
Используйте селектор `:link` для стилизации ссылок непосещенных страниц, селектор `:visited` для стилизации ссылок посещённых страниц, а селектор `:active` для стилизации нажатия на ссылку.
2018-10-12 16:00:59 -04:00
2019-04-22 22:39:17 +05:00
Примечание: `:hover` ДОЛЖЕН идти после `:link` и `:visited` (если они существуют) в определении CSS, для того чтобы быть эффективным!
2018-10-12 16:00:59 -04:00
2019-04-22 22:39:17 +05:00
## Синтаксис
:hover {
css declarations;
}
2018-10-12 16:00:59 -04:00
2019-04-22 22:39:17 +05:00
Селектор CSS `:hover` применяет только те стили, которое прописаны в е г о правиле, когда элемент переходит в состояние наведения.
Т о есть, когда пользователь наводит курсор мыши на элемент.
2018-10-12 16:00:59 -04:00
```css
2019-04-22 22:39:17 +05:00
button {
color: white;
background-color: green;
}
button:hover {
background-color: white;
border: 2px solid green;
color: green;
}
2018-10-12 16:00:59 -04:00
```
2019-04-22 22:39:17 +05:00
В приведенном выше примере обычным стилем кнопки является белый текст на зеленой кнопке.
Когда пользователь наводит курсор мыши на кнопку, правило с селектором `:hover` становится активным и стиль кнопки изменяется.
2018-10-12 16:00:59 -04:00
2019-04-22 22:39:17 +05:00
#### Больше информации:
* [MDN `:hover` Docs ](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes )