桌面悬停媒体查询不能防止粘滞悬停答案

【问题标题】：Desktop hover media query not preventing sticky hovers桌面悬停媒体查询不能防止粘滞悬停
【发布时间】：2021-01-11 06:40:03
【问题描述】：

我试图阻止在我点击手机浏览器上的元素时触发悬停效果。看来大家recommends to use the media query for hover解决了。

我不明白，因为这似乎对我没有任何帮助。我在我的新 Android 手机上使用最新的 Chrome，当我点击元素时，悬停效果仍然运行，红色背景卡在那里。

也就是说，在我的手机上单击此代码中的以下元素会导致红色背景卡住，然后再单击其他地方使其消失。

.test {
  background-color: #ddd;
  padding: 10px;
}

@media (hover:hover) {
  .test:hover {
    background-color: #ff0000;
  }
}

<div class="test">
  hover me
</div>

有人知道为什么会这样吗？如何防止在移动设备上发生粘滞悬停？

【问题讨论】：

【解决方案1】：

这对我来说似乎很完美。 @media (hover:hover) 仅适用于具有悬停功能的设备上的样式。所以这让我觉得你的移动设备确实支持这一点。

您可以尝试的另一个技巧是您可能已经尝试过的技巧。添加一个最大宽度的媒体查询，并在悬停时为.test 提供与原来相同的background-color。

例子：

@media only screen and (max-width: 600px) {
  .test:hover {
    background-color: #ddd
  }
}

如果屏幕宽度小于 600 像素，则悬停具有相同的背景颜色。

【讨论】：