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