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) .
|