javascript - 通过 css 去除所有悬停效果

Question

当我在触摸设备上放下时，我不想要悬停行为。是否可以一次禁用整个网站的所有悬停效果？

假设您使用 Modernizr 来检测触摸并设置类。

这是我想出的，但它给出了很多不一致的地方:

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

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

Answer 1

更新

现在所有移动浏览器都支持它，这里是 Can I use链接:

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

旧答案

这很好但不是 supported 很好:

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

但是这个有很好的 support :

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

对我来说完美无缺，它让所有的悬停效果都像当你触摸一个按钮时它会亮起但不会像鼠标事件的初始悬停效果那样最终出现错误。