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

Posted 2023-05-07

【中文标题】桌面悬停媒体查询不能防止粘滞悬停

【英文标题】：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 像素，则悬停具有相同的背景颜色。

【讨论】：

我想知道这是否与我的设备有关，因为我问了一位朋友，它在他的设备上有效。也许是因为我在我的 Android 上启用了开发者模式？