Codectionary / Developer documentation / CSS

Hover and Pointer Capability Queries

The hover and pointer media features describe capabilities of the primary pointing device rather than a screen size or device brand.

What it is and why to use it

The hover and pointer media features describe capabilities of the primary pointing device rather than a screen size or device brand. They are useful for adding optional hover details on suitable devices while keeping the essential action available everywhere.

Common mistakes and limitations

Hybrid devices can expose several input types; any-hover and any-pointer answer different questions about available devices. Never make an essential instruction or action hover-only. Keep keyboard and touch paths explicit.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<button class="action">Open lesson</button>

Syntax

@media (hover: hover) and (pointer: fine) { ... }

Examples

Hover and Pointer Capability Queries

Run the CSS against the supplied HTML, then experiment with the values.

.action { padding: .75rem; border: 2px solid #2563eb; }
.action:focus-visible { outline: 3px solid #0f172a; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .action:hover { background: #dbeafe; color: #172b4d; }
}
  1. The button has a usable default style and keyboard focus indicator.
  2. The media query adds a hover colour only when the primary pointer can hover accurately.
  3. The button remains usable without hover. A narrow screen can have a mouse, and a large screen can use touch, so width is not a reliable capability test.
HTML used by this example
<div class="demo"><button class="action">Open lesson</button></div>

Best practices

  • Hybrid devices can expose several input types; any-hover and any-pointer answer different questions about available devices. Never make an essential instruction or action hover-only. Keep keyboard and touch paths explicit.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading