Direct link to the article Solving Sticky Hover States with @media (hover: hover)

Solving Sticky Hover States with @media (hover: hover)

Direct Link

Mezo Istvan does a good job of covering the problem and a solution to it in a blog post on Medium. If you tap on something that has a :hover state but you don't leave the page then, on a mobile device, there is a chance that :hover state "sticks." You'll see this with stuff like jump-links used as tabs or buttons that trigger on-page functionality.
Avatar of Chris Coyier
Shared by Chris Coyier on


The :hover pseudo class in CSS selects elements when the mouse cursor is current over them. It’s commonly associated with link (<a>) elements.

a:hover {
  color: green;
  text-decoration: underline overline;

So when a link like this is …

Avatar of Sara Cope
Sara Cope on (Updated on )