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>