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?

http://stackoverflow.com/questions/8291517/disable-hover-effects-on-mobile-browsers — atmd, Jan 20 '15 at 15:19

Simon Dragsbæk · Accepted Answer · 2023-03-02T09:19:57.320

22

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.

edited Mar 02 '23 at 09:19

answered Jan 21 '15 at 12:40

Simon Dragsbæk

2,367
3
30
53

6

Just one note: this will deactivate any links or buttons you have in that element. – Varda Elentári Aug 04 '16 at 16:50
3

`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. – Remi D Nov 11 '16 at 08:36

score 1 · Answer 2 · answered Jan 20 '15 at 15:20

1

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)

answered Jan 20 '15 at 15:20

Gabriele Petrioli

191,379
34
261
317

score 1 · Answer 3 · answered Jan 20 '15 at 15:21

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.

Remove all hover effects through css

3 Answers3

Update

Old answer

Linked