CSS: Как разрешить наведение состояния только на устройствах, которые поддерживают наведение?

Question

Я искал способ, чтобы сенсорные устройства не "имитировали" событие при наведении.Причина в том, что вы не можете наводить курсор на сенсорные устройства, как на рабочем столе, с помощью курсора, и это иногда мешает работе пользователя.

Поскольку я не нашел каких-либо решений в Интернете, я думал, что выложу свойсобственное решение здесь.Надеюсь, это кому-нибудь поможет :)

Answer 1

Я достиг только наведения на устройствах, которые имеют реальное состояние наведения с двумя медиазапросами.

• Первый медиазапрос гарантирует, что CSS выполняется только тогда, когда текущее устройство имеет реальное состояние наведения.Это работает практически во всех браузерах: https://caniuse.com/#feat=css-media-interaction
• Второй медиа-запрос должен поддерживать IE11, поскольку первый не поддерживается IE11 ? https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast

@media (hover: hover), (-ms-high-contrast:none) {
  div:hover {
    background: red;
  }
}

<div>Hover me!</div>