Remove all hover effects through css

Question

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?

Answer 1

Update

This is now supported very decent across all mobile browsers, here is the Can I use link:

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

Old answer

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.

Answer 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)