Javascript 通过 css 移除所有悬停效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28048900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove all hover effects through css
提问by Simon Dragsb?k
When I come down on touch devices I don't want the hover behavior. Is it possible to disable all hover effects at once for a whole website?
当我接触触摸设备时，我不想要悬停行为。是否可以同时禁用整个网站的所有悬停效果？
Given that you use Modernizrto detect touch and set the class.
鉴于您使用Modernizr来检测触摸并设置类。
This is what I came up with but it gives a lot of inconsistency:
这是我想出的，但它给出了很多不一致：
html.touch *:hover {
color: inherit !important;
background: inherit !important;
}
Is there a way to do this with pure CSS? If not, how can it be done with javascript?
有没有办法用纯 CSS 做到这一点？如果没有，如何用javascript完成？
回答by Simon Dragsb?k
This is good but not supportedvery well:
html.touch *:hover {
all:unset!important;
}
But this has a very good support:
但这有很好的支持：
html.touch *:hover {
pointer-events: none !important;
}
Works flawless for me, it makes all the hover effects be like when you have a touch on a button it will light up but not end up buggy as the initial hover effect for mouse events.
对我来说完美无缺，它使所有悬停效果就像当您触摸按钮时它会亮起但最终不会作为鼠标事件的初始悬停效果出现问题。
回答by Gabriele Petrioli
Try the all:unsetor all:initial
尝试all:unset或all:initial
html.touch *:hover {
all:unset!important;
}
Support is limited (https://developer.mozilla.org/en-US/docs/Web/CSS/all)
回答by rwacarter
Attempting a catch-all solution is probably going to be tricky. I would just convert anywhere in your css where you defined a hover:
尝试一个包罗万象的解决方案可能会很棘手。我只会在你定义悬停的 css 中的任何地方进行转换：
.thing:hover {}
to include the Modernizr class:
包括 Modernizr 类：
html.no-touch .thing:hover {}
Although you should be aware that any solution that uses Modernizr will not be a 'pure CSS solution', as Modernizr is javascript.
尽管您应该意识到任何使用 Modernizr 的解决方案都不是“纯 CSS 解决方案”，因为 Modernizr 是 javascript。
