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.
button:hover {
border: 3px solid green; /* might stick! */
}The solution, or trick, is a new(ish) "CSS4" media query that allows you only to apply styles on devices with hover capability.
@media (hover: hover) {
button:hover {
border: 3px solid green; /* solves sticky problem */
}
}Your typical touch screen mobile device will fail that media query, the style won't apply, and you'll avoid the sticky problem.
Support is solid, so not much worry there.
- It almost feels like we have to apologize to linking to things on Medium lately. I have no idea what you're going to experience when you get there. Will you just be able to read it? Will it be a teaser where you have to log in to read more? Will it be behind a paywall? I have no idea. In this case, hopefully, this link post has enough info in it that isn't not blocking you from learning anything.
Direct Link to Article — Permalink
The post Solving Sticky Hover States with @media (hover: hover) appeared first on CSS-Tricks.