Correctly translated into Russian (#30041)
This commit is contained in:
@ -1,40 +1,42 @@
|
||||
---
|
||||
title: Hover Selector
|
||||
localeTitle: Селектор поворота
|
||||
localeTitle: Псевдокласс :hover
|
||||
---
|
||||
## Селектор поворота
|
||||
## Псевдокласс :hover
|
||||
|
||||
Селектор CSS `:hover` является одним из многих псевдоклассов, которые используются для стилей элементов.
|
||||
Селектор CSS `:hover` является одним из многих псевдоклассов, используемых для стилизации элементов.
|
||||
|
||||
Селектор: hover используется для выбора элементов при наведении указателя мыши на них.
|
||||
Селектор CSS `:hover` используется для выбора элементов при наведении на них курсора мыши.
|
||||
|
||||
Селектор: hover можно использовать для всех элементов, а не только для ссылок.
|
||||
Селектор CSS `:hover` можно использовать для всех элементов, а не только для ссылок.
|
||||
|
||||
С помощью селектора: link для стилей ссылок на неперечисленные страницы: селектор посещений для стилей ссылок на посещенные страницы и активный селектор для стилизации активной ссылки.
|
||||
Используйте селектор `:link` для стилизации ссылок непосещенных страниц, селектор `:visited` для стилизации ссылок посещённых страниц, а селектор `:active` для стилизации нажатия на ссылку.
|
||||
|
||||
Примечание.: Hover ДОЛЖЕН прибыть после: link и: посетил (если они присутствуют) в определении CSS, чтобы быть эффективными!
|
||||
Примечание: `:hover` ДОЛЖЕН идти после `:link` и `:visited` (если они существуют) в определении CSS, для того чтобы быть эффективным!
|
||||
|
||||
Синтаксис CSS : hover { css-объявления; }
|
||||
## Синтаксис
|
||||
:hover {
|
||||
css declarations;
|
||||
}
|
||||
|
||||
Селектор hover применяет только стили, предусмотренные в правиле, когда элемент входит в состояние зависания. То есть, когда пользователь наводит курсор мыши на элемент с помощью мыши.
|
||||
Селектор CSS `:hover` применяет только те стили, которое прописаны в его правиле, когда элемент переходит в состояние наведения.
|
||||
То есть, когда пользователь наводит курсор мыши на элемент.
|
||||
|
||||
```css
|
||||
button {
|
||||
color: white;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: white;
|
||||
border: 2px solid green;
|
||||
color: green;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: white;
|
||||
border: 2px solid green;
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
В приведенном выше примере обычным стилем кнопки является белый текст на зеленой кнопке. Когда пользователь наводится над кнопкой с помощью мыши, правило с селектором `:hover` станет активным, и стиль кнопки изменится.
|
||||
В приведенном выше примере обычным стилем кнопки является белый текст на зеленой кнопке.
|
||||
Когда пользователь наводит курсор мыши на кнопку, правило с селектором `: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) .
|
||||
#### Больше информации:
|
||||
* [MDN `:hover` Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
|
||||
|
Reference in New Issue
Block a user