# Make hover motion work with touch and keyboard use

Hover motion should enhance a control that already works with touch and keyboard input. Do not put essential information only behind hover. Use actual links and buttons, keep focus visible, and restrict pointer-specific effects to devices that support them.

## Start with the right element
A clickable div with a lift effect still lacks the default keyboard behavior of a button or link. Choose the semantic element based on the action. A link navigates; a button performs an action. Styling should follow that choice, not replace it.

```css
.card-link {
  display: block;
  transition: transform 160ms ease-out;
}
.card-link:focus-visible {
  outline: 3px solid #213db8;
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .card-link:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .card-link { transition: none; }
  .card-link:hover { transform: none; }
}
```

The colors and timing are example values. Check contrast against your actual background. A focus outline and a hover movement communicate different things; keyboard users do not need the movement to see the focus.

## Keep information visible
A card’s title, price, or action should not appear only when the pointer enters. On touch, there may be no stable hover state. If you use a tooltip for extra explanation, give it an accessible trigger and do not use it as the sole place for required instructions.

## Test three paths
| Input | What to inspect |
| --- | --- |
| Mouse | Hover does not shift surrounding layout or obscure content |
| Keyboard | Tab reaches the control; focus is visible; activation works |
| Touch | One tap performs the expected action without a hover trap |

Try a hybrid device if it matters to your audience. Media queries describe input capabilities, not a permanent category of person or device.

## Keep the effect subordinate
If a whole card moves, check nearby controls and hit targets during the transition. A small decorative movement should not make the action harder to select. Reduce or remove the effect when it competes with reading, causes accidental activation, or makes the interface feel unstable.

---
SkillStall · 2026-10-02
MDN: prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion