问题
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 Modernizr to detect touch and set the class.
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?
回答1:
This is good but not supported very 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.
回答2:
Try the all:unset
or all:initial
html.touch *:hover {
all:unset!important;
}
Support is limited (https://developer.mozilla.org/en-US/docs/Web/CSS/all)
回答3:
Attempting a catch-all solution is probably going to be tricky. I would just convert anywhere in your css where you defined a hover:
.thing:hover {}
to include the Modernizr class:
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.
来源:https://stackoverflow.com/questions/28048900/remove-all-hover-effects-through-css