通过css删除所有悬停效果答案

【问题标题】：Remove all hover effects through css通过css删除所有悬停效果
【发布时间】：2015-03-18 21:23:18
【问题描述】：

当我使用触控设备时，我不希望出现悬停行为。是否可以一次禁用整个网站的所有悬停效果？

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

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

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

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

【问题讨论】：

【解决方案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;
}

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

【讨论】：

【解决方案2】：

试试all:unset 或all:initial

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

【讨论】：

【解决方案3】：

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

.thing:hover {}

包括 Modernizr 类：

html.no-touch .thing:hover {}

尽管您应该知道，任何使用 Modernizr 的解决方案都不会是“纯 CSS 解决方案”，因为 Modernizr 是 javascript。

【讨论】：