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
`hover`	38 До Chrome 41 реализация была некорректной и сообщала `(hover: none)` на компьютерах без сенсорного ввода с помощью мыши/трекпада. См. ошибку 40397980.	12	64	25 До Opera 28 реализация была некорректной и сообщала `(hover: none)` на компьютерах без сенсорного ввода с помощью мыши/трекпада. См. ошибку 40397980.	9	50	64	37	9	5.0	50

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover