我想忽略所有:hover CSS声明,如果用户通过touch 设备访问我们的网站.因为:hoverCSS没有意义,如果平板电脑在单击/点击时触发它,甚至可能会让人感到不安,因为那样它可能会一直停留到元素失go 焦点.老实说,我不知道为什么touch 设备一开始就觉得有必要触发:hover-但这是现实,所以这个问题也是现实.

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

So, (how) can I remove/ignore all CSS 100 declarations at once (without having to know each one) for touch devices after having them declared?

推荐答案

2020 Solution - CSS only - No Javascript

使用media hovermedia pointer将帮助您解决此问题.在chrome Web和android mobile上测试.我知道这个老问题,但我没有找到这样的解决办法.

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}
<a href="#" >Some Link</a>

Html相关问答推荐

传单自定义标记(divIcon)html/css不适用

Font Awesome 6插入符号未显示

如何在div中淡入和淡出渐变背景?

在Quarto/Discrealjs演示文稿中只增加一个列表的填充

HX-POST未使用正确的操作(路径)

来自元标记的响应文本

如何在 Bootstrap 5 中将两个导航栏元素放在末尾?

如何在Go模板中传入途中创建的 map

如何使Bootstrap 5卡可点击

第 117 行的块标记无效:endblock,应为empty或endfor.您是否忘记注册或加载此标签?

如何将一个边框向下移动

获取链接到功能的网页表单

如何为Vuetify输入控件减小标签和字段之间的间距?

将现有内容拆分为三列或部分

奇怪的幻影 div 命名为

如何并排放置
的定义列表,但如果
变长,
会向下移动?

是否可以为长 huxtable 固定头部?

如何在不删除

标记的情况下加入 HTML 中的段落

当另一个 div 的高度改变或执行其内容的换行时,将 flex 方向更改为列

粘性定位的子元素忽略父母的填充