如何解决桌面悬停媒体查询不能阻止粘性悬停
我试图防止在单击手机浏览器上的元素时触发悬停效果。似乎每个人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>
有人知道为什么会这样吗?如何防止移动设备发生粘滞徘徊?
解决方法
这似乎对我来说很完美。 @media (hover:hover)
仅在具有悬停功能的设备上应用样式。因此,我认为您的移动设备确实支持该功能。
您可以尝试的另一种技巧是您可能已经尝试过。
添加具有最大宽度的媒体查询,并为.test
提供悬停时与原来相同的background-color
。
示例:
@media only screen and (max-width: 600px) {
.test:hover {
background-color: #ddd
}
}
如果屏幕宽度小于600像素,则悬停将具有相同的背景色。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。