通过css删除所有悬停效果

当我在触摸设备上下来时,我不想要悬停行为.是否可以立即禁用整个网站的所有悬停效果？

鉴于您使用Modernizr来检测触摸并设置类.

这是我想出来的,但它给出了很多不一致性:

html.touch *:hover {
    color: inherit !important;
    background: inherit !important;
}

有没有办法用纯CSS做到这一点？如果没有,如何用Javascript完成？

1> Simon Dragsb..：

---

这很好,但不太支持:

html.touch *:hover {
    all:unset!important;
}

但这有很好的支持:

html.touch *:hover {
    pointer-events: none !important;
}

对我来说完美无瑕,它使所有的悬停效果就像当你触摸一个按钮时它会亮起但不会因为鼠标事件的初始悬停效果而失败.

---

只需注意一下:这将取消激活您在该元素中的任何链接或按钮.

---

`pointer-events:none`不应该应用于`:hover`事件选择器,而应该应用于元素选择器本身,因为它通过静音悬停事件来工作.