Медиафункция CSS `hover`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с декабря 2018 года.

Медиафункцию hover CSS медиафункции можно использовать, чтобы проверить, может ли основное устройство ввода пользователя наводить указатель на элементы.

Синтаксис

Медиафункция hover задаётся одним из ключевых слов, перечисленных ниже.

none: Основное устройство ввода не поддерживает наведение указателя или не позволяет удобно наводить его (например, многие мобильные устройства имитируют наведение, когда пользователь долго удерживает палец на экране, что неудобно), либо основного указывающего устройства ввода нет.
hover: Основное устройство ввода позволяет удобно наводить указатель на элементы.

Примеры

HTML

<a href="#">Try hovering over me!</a>

CSS

/* default hover effect */
a:hover {
  color: black;
  background: yellow;
}

@media (hover: hover) {
  /* when hover is supported */
  a:hover {
    color: white;
    background: black;
  }
}

Результат

Спецификации

Спецификация
Media Queries Level 4 # hover

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`hover`	38 До Chrome 41 реализация работала с ошибками и возвращала `(hover: none)` на компьютерах без сенсорного экрана с мышью или трекпадом. См. ошибку 40397980.	12	64	25 До Opera 28 реализация работала с ошибками и возвращала `(hover: none)` на компьютерах без сенсорного экрана с мышью или трекпадом. См. ошибку 40397980.	9	50 На некоторых устройствах Android, например на отдельных моделях Samsung, медиа-запрос `(hover: hover)` может срабатывать ошибочно. См. ошибку 41445959.	64	37 На некоторых устройствах Android, например на отдельных моделях Samsung, медиа-запрос `(hover: hover)` может срабатывать ошибочно. См. ошибку 41445959.	9	5.0 На некоторых устройствах Android, например на отдельных моделях Samsung, медиа-запрос `(hover: hover)` может срабатывать ошибочно. См. ошибку 41445959.	50 На некоторых устройствах Android, например на отдельных моделях Samsung, медиа-запрос `(hover: hover)` может срабатывать ошибочно. См. ошибку 41445959.	9

См. также

© 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/At-rules/@media/hover