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

When Tap-to-Hover Gets Stuck

On touch devices, a tap can “stick” a :hover style to an element even after your finger lifts. This commonly happens with jump-links used as tabs or buttons that trigger on-page actions without navigation — the element stays visually highlighted as if it were still being hovered.

button:hover {
  border: 3px solid green; /* might stick! */
}

The fix relies on a media query from the CSS Media Queries Level 4 specification: @media (hover: hover). This query only matches devices that support a primary input capable of hovering, such as a mouse or trackpad. Most touchscreen phones and tablets fail this check, so :hover styles applied within the query are simply never rendered on those devices — eliminating the sticky-state problem entirely.

@media (hover: hover) {
  button:hover {
    border: 3px solid green; /* solves sticky problem */
  }
}

Support for the hover media feature is broad across modern browsers, so this technique is generally safe to adopt without extensive fallbacks.