Skip to main content
UI Guides

Search rules

Search all UI Guides rules by name, category, or source

interactionsRauno

Hover States with Media Query

MUST

MUST: Gate hover styles behind `@media (hover: hover)` so touch devices never get a flash of sticky hover state on press.

Hover states should not be visible on touch press — use @media (hover: hover)

@media (hover: hover) {
  .btn:hover { background: var(--accent); }
}

Bad

Good

Why it matters

On touch devices, pressing an element briefly triggers its hover state, causing a flash of the hover style. Wrapping hover declarations in @media (hover: hover) ensures they only apply on devices with a true pointer, like a mouse.

References

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.