Remove all hover effects through css

javascript html css modernizr
Simon Dragsbæk picture Simon Dragsbæk · Jan 20, 2015 · Viewed 23.4k times · Source

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

Simon Dragsbæk picture Simon Dragsbæk · Jan 21, 2015

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.

Related questions

How to get html element's class tags

I'm using a custom modernizer config which has selected the features I employ in my page (and only those features). So, I'd like to simply grab the className of the <html> of the page so I can check …

Read More
Modernizr with Respond.js

I am carefully assessing the best way to utilize Modernizr and Respond.js for responsive design and have a couple of questions for the community. Firstly, it is my understanding that when bundling Modernizr with Respond.js, no other coding …

Read More
Understanding Modernizr benefits over html5shiv

I know there's a lot of good questions on the site about these two script libraries. I wanted to ask something that I can't seem to find in any of them though. What does Modernizr provide that html5shiv doesn't …

Read More