Hover effects on mobile: what happens on touch screens and how to design for it

A hover effect assumes a pointer that can rest over something without pressing it. A finger cannot do that: it is either touching the screen or it is not. So what happens to all those hover states when someone visits on a phone?

What browsers do with hover on touch

To keep older sites working, mobile browsers emulate some mouse behaviour after a tap. In practice:

• The first tap may trigger the hover state instead of the click, especially when hover reveals a menu. People then have to tap again.
• Hover styles can "stick" after a tap, so a card stays in its hover state until the visitor taps somewhere else.
• Anything only visible on hover is effectively invisible, unless people happen to tap the right spot.

The behaviour differs between browsers, which is exactly why you should not rely on it. web.dev's guide to designing for interaction puts it simply: do not use hover to hide important information or an important interface element.

Detect what the visitor can do

CSS has media features for the visitor's input:

Wrap purely decorative hover effects so they only apply where hover exists, and pair them with :focus-visible for keyboard users:

@media (hover: hover) {
  .card:hover { transform: translateY(-2px); }
}
.card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

In JavaScript, pointer events tell you what kind of input produced each event, so you can respond differently to a mouse and a finger:

el.addEventListener('pointermove', e => {
  if (e.pointerType === 'touch') { /* finger: react to drags */ }
  else { /* mouse or pen: react to hover position */ }
})

Design rules that work on both

1. The resting state must be complete. Design the version nobody interacts with first. That is what most phone visitors see.
2. Hover adds, it never reveals. Lift, highlight and colour changes are fine. Hidden text, prices or buttons are not.
3. Tap targets do one thing. If a card is a link, a tap should follow it, not open a hover state first.
4. Drags should not trap scrolling. If an illustration responds to a finger, let vertical drags scroll the page.
5. Test on a real phone. Desktop device emulation does not reproduce sticky hover or tap delays faithfully.

Pointer-driven illustrations on phones

Interactive illustrations that follow the pointer are a special case: on a phone there is no pointer until a finger lands. Two things make them work well on touch:

• touch-action: pan-y on the illustration, so vertical swipes scroll the page and horizontal drags move the drawing.
• A short pause before returning to rest after the finger lifts, so the visitor can see what their touch did.

Liniqo Live figures do both: the figure's box uses touch-action: pan-y, and after a touch the figure holds its pose for a little over a second before settling. Try dragging a finger sideways across the figure above on your phone. Their resting state is drawn to look finished on its own, so a visitor who never touches one still sees a complete illustration. The rest are in the library.

A quick audit for an existing site

• Search your CSS for :hover rules that change display, visibility or opacity from hidden to shown. Each one is content phone users may never see.
• Check menus that open on hover. Make them open on tap or click too.
• Check carousels and illustrations that respond to drags: can you still scroll past them with one thumb?
• Check that tooltips have a tap or focus equivalent.

For the accessibility side of interactive pieces, see Accessible interactive illustrations.

Questions

Do hover effects work on mobile?

Not reliably. Phones have no hover, and browsers emulate it after a tap in ways that differ between browsers. Hover should only add polish, never reveal content.

How do I disable hover effects on touch devices?

Wrap hover rules in @media (hover: hover) so they apply only when the primary input can hover.

What is the difference between hover: none and pointer: coarse?

hover: none means the primary input cannot hover. pointer: coarse means it is imprecise, like a finger. Most phones match both.

How do I let users scroll past an interactive illustration on mobile?

Set touch-action: pan-y on it. Vertical swipes scroll the page and horizontal drags go to the illustration.