Псевдокласс CSS `:hover`
Baseline Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
:hover CSS — это псевдокласс, который выбирает элемент, когда пользователь взаимодействует с ним с помощью указывающего устройства. Обычно псевдокласс срабатывает, когда пользователь перемещает курсор (указатель мыши) над элементом, не нажимая кнопку мыши.
Попробуйте
.joinBtn {
width: 10em;
height: 5ex;
background-color: gold;
border: 2px solid firebrick;
border-radius: 10px;
font-weight: bold;
color: black;
cursor: pointer;
}
.joinBtn:hover {
background-color: bisque;
}
<p>Would you like to join our quest?</p> <button class="joinBtn">Confirm</button>
Стили, заданные псевдоклассом :hover, будут переопределены любым последующим псевдоклассом, связанным со ссылками (:link, :visited или :active), обладающим как минимум такой же специфичностью. Чтобы правильно стилизовать ссылки, поместите правило :hover после правил :link и :visited, но перед правилом :active, в соответствии с порядком LVHA: :link — :visited — :hover — :active.
Примечание: Псевдокласс :hover может вызывать проблемы на сенсорных экранах. В зависимости от браузера псевдокласс :hover может никогда не соответствовать элементам, соответствовать им только некоторое время после касания или продолжать соответствовать им даже после того, как пользователь перестал касаться экрана, — до касания другого элемента. Веб-разработчикам следует убедиться, что контент доступен на устройствах с ограниченными или отсутствующими возможностями наведения.
Синтаксис
:hover {
/* ... */
}
Примеры
Простой пример
HTML
<a href="#">Try hovering over this link.</a>
CSS
a {
background-color: powderblue;
transition: background-color 0.5s;
}
a:hover {
background-color: gold;
}
Результат
Спецификации
| Спецификация |
|---|
| HTML # selector-hover |
| Селекторы, уровень 4 # hover-pseudo |
Совместимость с браузерами
| Настольные | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
hover |
1 |
12 |
1 |
4 |
2 |
18 |
4 |
10.1 |
1Начиная с Safari для iOS 7.1.2, касание интерактивного элемента переводит его в состояние:hover. Элемент останется в состоянии :hover, пока другой элемент не перейдёт в состояние :hover. |
1.0 |
4.4 |
1Начиная с Safari для iOS 7.1.2, касание интерактивного элемента переводит его в состояние:hover. Элемент останется в состоянии :hover, пока другой элемент не перейдёт в состояние :hover. |
a_elements |
1 |
12 |
1 |
4 |
2 |
18 |
4 |
10.1 |
1 |
1.0 |
37 |
1 |
all_elements |
1 |
12В Edge наведение курсора на элемент с последующей прокруткой вверх или вниз без перемещения указателя оставляет элемент в состоянии:hover до тех пор, пока указатель не будет перемещён. |
1 |
7 |
2 |
18 |
4 |
10.1 |
1 |
1.0 |
37 |
1 |
top-layer_ancestor_matching_boundary |
149 |
149 |
Нет |
133 |
Нет |
149 |
Нет |
100 |
Нет |
Нет |
149 |
Нет |
См. также
- Ошибка Chromium #370155: не закреплять
:hoverпри касании на сайтах, задающих область просмотра для мобильных устройств - Ошибка Chromium #306581: немедленно отображать состояния наведения и активации при касании, если страницу нельзя прокручивать.
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:hover
