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?

Solution 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.

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

Solution 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.

Comments

[Varda Elentári]

Just one note: this will deactivate any links or buttons you have in that element.

[Remi D]

pointer-events: none should not be applied on the :hover event selector but on the element selector itself as it works by muting the hover events.