Remove all hover effects via css

Question

When I go down on touch devices, I don't need hover behavior. Is it possible to immediately disable all the freezing effects for the entire website?

Given that you use the Upgrade 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 using pure CSS? If not, how can this be done using javascript?

Answer 1

This is good, but not supported :

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

But this one has very good support :

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

It works flawlessly for me, it makes all the freezing effects look like when you click on a button, it lights up, but does not end, like the initial hover effect for mouse events.

Answer 2

Try all:unset or all:initial

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

Support is limited ( https://developer.mozilla.org/en-US/docs/Web/CSS/all )

Answer 3

Trying to catch the whole solution is likely to be a daunting task. I would just convert anywhere in your css where you defined the hang:

 .thing:hover {} 

enable the Modernizr class:

 html.no-touch .thing:hover {} 

Although you should be aware that any solution using Modernizr will not be a “clean CSS solution”, since Modernizr is javascript.