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