支持悬停的设备的媒体查询

Question

我想为支持悬停的浏览器（例如桌面浏览器）和不支持悬停的浏览器（例如触摸屏设备）提供单独的行为。具体来说，我想在支持它的浏览器上声明一个悬停状态，但不是为不支持它的浏览器声明一个悬停状态，以避免让移动浏览器通过额外的点击来模拟它，因为这会破坏页面上的其他交互 - 通过不定义悬停这些浏览器的状态是可以避免的。

我已经阅读了 交互媒体查询 功能，它看起来应该可以解决问题。我可以做类似的事情：

 @media (hover: none) {
  /* behaviour for touch browsers */
}

根据 CanIUse 的说法，它适用于我需要支持的所有浏览器，除了 IE11 和 Firefox。

所以我想知道我是否可以反过来做 - 因为主要的触摸设备都支持它，然后否定它：

 @media not (hover: none) {
  /* behaviour for desktop browsers */
}

但是，这似乎根本不起作用。

我正在尝试做的伪代码示例：

 .myelement {
  /* some styling */
  /* note: no hover state here */
}
@media(this device supports hover) {
  .myelement:hover {
    /* more styling */
  }
}

那么，有没有办法让这项工作以预期的方式工作，还是我走错了路？

原文由 moogal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

感谢 Dekel 的评论，我通过在 JS 中运行逻辑并改为应用一个类来解决这个问题：

例如

const canHover = !(matchMedia('(hover: none)').matches);
if(canHover) {
  document.body.classList.add('can-hover');
}

然后在样式表中：

 .myElement {
  background: blue;
}
.can-hover .myElement:hover {
  background: red;
}

我已经在桌面 Chrome、Safari 和 Firefox 以及 iOS Safari 上对此进行了测试，它按预期工作。

原文由 moogal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

请不要使用媒体查询“悬停”。我在我的 27” 显示器上使用鼠标，但我所有的浏览器都有设置 “hover:none” 虽然我喜欢并且能够悬停很多。也许我所有的浏览器都有 hover:none 因为我的笔记本电脑在我的外围设备连接有触摸屏。也许你可以试试any-hover媒体查询开发者 mozilla.org/en-US/docs/Web/CSS/@media/any-hover

我制作了一个网站，您可以在其中测试浏览器的设置，参考这个问题 andreasburg.de/browser-hover-check.html

原文由 Andreas 发布，翻译遵循 CC BY-SA 4.0 许可协议