通过CSS移除所有的鼠标悬停效果

Question

13

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

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

这是我想到的解决方法，但它会导致很多不一致性：

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

有没有纯CSS的方法可以做到这一点？如果没有，那么如何使用JavaScript实现？

- Simon Dragsbæk

https://dev59.com/VWsy5IYBdhLWcg3w0RbT - atmd

3个回答

1

尝试使用all:unset或all:initial。

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

- Gabriele Petrioli

1

尝试使用一种全能解决方案可能会很棘手。我建议您只需将CSS中定义悬停的任何地方进行转换：

.thing:hover {}

包含 Modernizr 类：

html.no-touch .thing:hover {}

虽然您应该知道，任何使用Modernizr的解决方案都不是“纯CSS解决方案”，因为Modernizr是JavaScript。

- rwacarter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Dragsbæk · Accepted Answer

更新

现在所有移动浏览器都很好地支持此功能，这是 Can I use链接:

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

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

但这个有非常好的支持：

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

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