使用 @media (hover: Hover) 解决粘滞悬停状态

Mezo Istvan 在 Medium 上的一篇博文中很好地介绍了这个问题及其解决方案¹。

如果您点击具有 :hover 状态的内容，但没有离开页面，那么在移动设备上，:hover 状态可能会“粘滞”。您会在使用跳转链接作为选项卡或触发页面内功能的按钮等内容中看到这种情况。

button:hover {
  border: 3px solid green; /* might stick! */
}

解决方案或技巧是一个新的（或较新的）“CSS4” 媒体查询，它允许您仅在具有悬停功能的设备上应用样式。

@media (hover: hover) {
  button:hover {
    border: 3px solid green; /* solves sticky problem */
  }
}

典型的触摸屏移动设备将无法通过该媒体查询，样式不会应用，并且您将避免粘滞问题。

支持度很高，所以不用太担心。

最近我们似乎不得不为链接到 Medium 上的内容道歉。我不知道您在那里会遇到什么体验。您能否只阅读它？它是否会是一个您需要登录才能阅读更多内容的预告？它是否在付费墙后面？我不知道。在这种情况下，希望这篇链接文章包含足够的信息，不会阻止您学习任何内容。

Vivek

# 2020年2月19日

喜欢这篇文章简洁的风格。

关于脚注，感谢您添加了它。
我个人认为这样的文章不应该成为（双关语）货币化的媒介。
这也是我更喜欢经常来这里的原因之一。

Alistair Shepherd

# 2020年2月19日

不幸的是，这次我必须登录 Medium 才能继续阅读。感谢您在这里提供的总结！

leon

# 2020年2月19日

这个想法很棒，但它在我的手机（Android 9）和 Chrome 80 上不起作用。
使用以下代码进行了测试

@media (hover: hover) {
html,body{
background:red !important;
}
}

两者都失败了

Jamie

评论永久链接# 2022年1月25日

这听起来很傻，但为什么 :hover 样式首先会在触摸屏上生效，如果它们无法通过媒体查询检查呢？
Iggny

评论永久链接# 2022年10月7日

我赞同 Jamie 的问题。如果浏览器决定它应该无法通过悬停媒体查询，为什么它会识别 :hover 伪类？有没有人能想到浏览器想要失败一个但不失败另一个的用例？

basher

# 2020年2月19日

这很不错。我以前从未遇到过这个媒体查询。

之前，我使用 https://github.com/ten1seven/what-input 来根据输入类型管理 :hover 和 :focus 样式。

Jan

# 2020年2月19日

如果您需要支持 IE11，请查看此解决方案： https://stackoverflow.com/a/55867559

Phil Seamore

# 2020年2月25日

我认为这种方式可能更简单

@media (hover: none) {
    *:hover {
        border: inherit;
        /* and other properties changed on hover set to inherit */
    }
}

此评论线程已关闭。如果您需要分享重要信息，请联系我们。