Key insights
- Touch has no hover, so the browser fakes one: the first tap is spent becoming a sticky hover that freezes the revealed actions in place until the user taps somewhere else.
- Never bury a primary action behind hover. Hover should surface extras only, never something the user cannot otherwise reach.
- Give hover-only actions a touch-reachable home: put them in the card, behind a swipe, or inside a bottom sheet.
- Gate hover styles with
@media (hover: hover)instead of sniffing the user agent, so a tablet with a mouse still gets the full treatment. - Pair it with
pointer: coarseto grow controls when the pointer is a thumb rather than a mouse. - A 20px icon passes design review but misses the thumb. Pad the hit area to 44px and keep the glyph small.
Do / Don't
- Do: Reveal only secondary extras on hover, keeping every primary action reachable by tap
- Do: Gate hover effects behind
@media (hover: hover)so pointer capability decides, not device type - Do: Pad tap targets to 44px while keeping the visible icon around 20px
- Don't: Hide primary actions behind a hover state that touch users can never trigger
- Don't: Detect touch by sniffing the user agent instead of querying the pointer
- Don't: Size the tap target to the 20px icon and leave the thumb missing
