通过 css 删除所有悬停效果

Question

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

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

这是我想出来的，但它有很多不一致之处：

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

有没有办法用纯 CSS 做到这一点？如果不行，用javascript怎么办？

Answer 1

尝试 all:unset 或 all:initial

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

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

Answer 2

尝试一个包罗万象的解决方案可能会很棘手。我会在您定义悬停的 css 中的任何位置进行转换：

.thing:hover {}

包括 Modernizr class:

html.no-touch .thing:hover {}

虽然您应该知道任何使用 Modernizr 的解决方案都不会是 'pure CSS solution'，因为 Modernizr 是 javascript.

Answer 3

更新

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

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

旧答案

这很好但不是supported很好:

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

不过这个已经很好了support:

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

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