CSS: 如何只在支持悬停的设备上允许悬停状态？

Question

我正在寻找一种方法来防止触摸设备受到 "simulating" 悬停事件的影响。原因是您不能像在桌面上那样用光标悬停在触摸设备上，这有时会影响用户体验。

因为我没有在网上找到任何解决方案，所以我想我 post 这里是我自己的解决方案。我希望这会对某人有所帮助:)

Answer 1

我实现了仅在具有两个媒体查询的真实悬停状态的设备上悬停。

第一个媒体查询确保 CSS 仅在当前设备具有真正的悬停状态时执行。这几乎适用于所有浏览器：https://caniuse.com/#feat=css-media-interaction
第二个媒体查询支持IE11，因为第一个不支持IE11https://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>

CSS: How to allow the hover state only on devices which support hover?