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: coarse to 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
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
