How to remove/ignore :hover css style on touch devices

css, hover, html, touch

Solution

2020 Solution - CSS only - No Javascript

Use media hover with media pointer will help you resolve this issue. Tested on chrome Web and android mobile. I known this old question but I didn't find any solution like this.

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}

<a href="#" >Some Link</a>

Problem

I want to ignore all `:hover` CSS declarations if a user visits our website via touch device. Because the `:hover` CSS does not make sense, and it can even be disturbing if a tablet triggers it on click/tap because then it might stick until the element loses focus. To be honest, I don't know why touch devices feel the need to trigger `:hover` in first place - but this is reality, so this problem is reality as well. ``` a:hover { color:blue; border-color:green; /* etc. > ignore all at once for touch devices */ } ``` So, (how) can I remove/ignore all CSS `:hover` declarations at once (without having to know each one) for touch devices after having them declared?

Original source

Related problems