使用@media解决粘性悬停状态（悬停：悬停）

Mezo伊什特万做一个好工作覆盖问题，并在中博客文章给它一个解决方案¹ 。

如果您轻触具有

:hover

状态但未离开页面的内容，则在移动设备上，

:hover

状态可能会“粘住”。 您会看到诸如跳转链接之类的东西，它们被用作触发页面功能的选项卡或按钮。

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

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

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

典型的触摸屏移动设备将无法进行媒体查询，样式将不适用，并且可以避免出现粘性问题。

支持扎实 ，因此不用担心。

1. 几乎感觉到我们最近不得不对链接到Medium上的内容表示歉意。 我不知道你到那里时会经历什么。 您会阅读吗？ 您需要登录才能阅读更多的预告片吗？ 它会在收费墙后面吗？ 我不知道。 在这种情况下，希望此链接文章中包含足够的信息，不会阻止您学习任何东西。

直接连结→

翻译自: https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/