Javascript 桌面悬停媒体查询不阻止粘性悬停

当我点击手机浏览器上的某个元素时，我试图阻止鼠标悬停的效果。似乎每个人都在解决这个问题

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

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

.test{
背景色：#ddd；
填充：10px；
}
@媒体（悬停：悬停）{
.测试：悬停{
背景色：#ff0000；
}
}

盘旋我

这对我来说似乎非常合适

@media（hover:hover）

仅用于在具有悬停功能的设备上应用样式。因此，我认为您的移动设备确实支持这一点

你可以尝试的另一个技巧可能是你已经尝试过的。 添加具有最大宽度的媒体查询，并在悬停时为

.test

提供与原来相同的

背景色

例如：

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

如果屏幕宽度小于600像素，则鼠标悬停的背景颜色相同。
我想知道这是否与我的设备有关，因为我问了一位朋友，他的设备工作正常。也许是因为我在Android上启用了开发者模式？