通过css删除所有悬停效果

Question

当我进入触摸设备时，我不想要悬停行为。是否可以立即禁用整个网站的所有悬停效果？

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

这是我提出的，但它带来了很多不一致：

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

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

Answer 1

这很好但不是 supported ：

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

但这有一个非常好的 support ：

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

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

Answer 2

尝试all:unset或all:initial

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

支持有限（https://developer.mozilla.org/en-US/docs/Web/CSS/all）

Answer 3

尝试全面解决方案可能会很棘手。我只想转换你定义悬停的css中的任何地方：

.thing:hover {}

包括Modernizr类：

html.no-touch .thing:hover {}

虽然你应该知道任何使用Modernizr的解决方案都不是'纯CSS解决方案'，因为Modernizr是javascript。