小编典典

如何删除/忽略:触摸设备上的悬停 CSS 样式

all

:hover如果用户通过触摸设备访问我们的网站,我想忽略所有CSS 声明。因为:hoverCSS
没有意义,如果平板电脑在点击/点击时触发它,它甚至可能会令人不安,因为它可能会一直停留直到元素失去焦点。老实说,我不知道为什么触摸设备:hover首先需要触发
- 但这是现实,所以这个问题也是现实。

a:hover {
  color:blue;
  border-color:green;
  /* etc. > ignore all at once for touch devices */
}

那么,(如何):hover在声明触摸设备后,我可以一次删除/忽略所有 CSS 声明(不必知道每个声明)吗?


阅读 70

收藏
2022-06-23

共1个答案

小编典典

2020 解决方案 - 仅 CSS - 无 Javascript

使用带有媒体指针的媒体悬停将帮助您解决此问题。在 chrome Web 和 android mobile
上测试。我知道这个老问题,但我没有找到任何这样的解决方案。

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}


<a href="#" >Some Link</a>
2022-06-23