freeCodeCamp/guide/russian/css/hover-selector/index.md

title, localeTitle

title	localeTitle
Hover Selector	Псевдокласс :hover

Псевдокласс :hover

Селектор CSS :hover является одним из многих псевдоклассов, используемых для стилизации элементов.

Селектор CSS :hover используется для выбора элементов при наведении на них курсора мыши.

Селектор CSS :hover можно использовать для всех элементов, а не только для ссылок.

Используйте селектор :link для стилизации ссылок непосещенных страниц, селектор :visited для стилизации ссылок посещённых страниц, а селектор :active для стилизации нажатия на ссылку.

Примечание: :hover ДОЛЖЕН идти после :link и :visited (если они существуют) в определении CSS, для того чтобы быть эффективным!

Синтаксис

:hover { css declarations; }

Селектор CSS :hover применяет только те стили, которое прописаны в его правиле, когда элемент переходит в состояние наведения. То есть, когда пользователь наводит курсор мыши на элемент.

button {
  color: white;
  background-color: green;
}

button:hover {
  background-color: white;
  border: 2px solid green;
  color: green;
}

В приведенном выше примере обычным стилем кнопки является белый текст на зеленой кнопке. Когда пользователь наводит курсор мыши на кнопку, правило с селектором :hover становится активным и стиль кнопки изменяется.

Больше информации:

• MDN :hover Docs