Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS pointer and hover queries: keep touch targets usable

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

The hover and pointer media features describe input capabilities. They can adapt affordances, but one device may have multiple inputs and the primary input can change.

How the rule works

An investigation card reveals an action row. The action must be available by default or on keyboard focus; a hover effect may add emphasis when the primary pointer supports it. Do not hide a destructive action until hover on a touch device, since the user may never discover it. A coarse-pointer rule can increase spacing around controls, but target size still needs review on actual hardware. Capability queries describe the environment, not a particular user's intent or disability. Keep focus-visible styling independent of hover and test hybrid devices such as a tablet with a mouse. If the content needs a disclosure state, use a real button and state rather than a CSS-only hover reveal.

css
.investigation-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.investigation-card:focus-within { outline: 2px solid #175b44; }
@media (hover: hover) and (pointer: fine) {
  .investigation-card:hover { border-color: #175b44; }
}
@media (pointer: coarse) {
  .investigation-card__actions button { min-block-size: 2.75rem; }
}

Cost and verification

A border-color change costs little compared with moving a whole card on hover. The coarse-pointer rule changes target height, which can increase wrapping and page length; test that the action row still fits. A hybrid device can report one primary pointer while another is attached, so the base action layout must remain usable under every query result. Check keyboard focus, touch, stylus, and mouse. The CSS cannot prevent accidental destructive actions; confirmation and authorization belong to application behavior.

Common Mistakes

  • Do not make hover the only way to find an action.
  • Do not treat pointer: fine as proof that touch is absent.
  • Do not make tap targets larger by overlapping adjacent controls.

Connected lessons

css
responsive
web
Storage details