文章/答案/技术大牛

发布

社区首页 >问答首页 >桌面悬停媒体查询不会阻止粘滞悬停

问桌面悬停媒体查询不会阻止粘滞悬停
EN

Stack Overflow用户

提问于 2020-09-25 06:52:02

回答 1查看 40关注 0票数 0

当我点击手机浏览器上的一个元素时，我正试图防止触发悬停效果。似乎每个人都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>

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

javascript

android

html

css

hover

回答 1

Stack Overflow用户

发布于 2020-09-25 15:16:21

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

你可以尝试的另一个技巧是你可能已经尝试过的东西。添加具有最大宽度的媒体查询，并为.test提供与最初相同的悬停background-color。

示例：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64055450

复制

相似问题

问桌面悬停媒体查询不会阻止粘滞悬停
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问桌面悬停媒体查询不会阻止粘滞悬停EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问桌面悬停媒体查询不会阻止粘滞悬停
EN