CSS any-hover Media Feature

Definition and Usage

The any-hover media feature tests whether any available input can conveniently hover over elements.

Use @media (any-hover: hover) when a mouse, trackpad, or another hover-capable device is present. Use @media (any-hover: none) when nothing can hover (typical phones without a mouse). Unlike hover, it is not limited to the primary input — useful on hybrid touch + mouse devices. It is not the same as the :hover pseudo-class.

CSS Syntax

Always wrap the feature in parentheses. Invalid forms like @media any-hover(hover) do not work.

Feature Values

How to Use any-hover

Ship usable defaults first, then add hover-only enhancements for any hover-capable input.

1. Design controls that work with tap/click without relying on hover.
2. Wrap hover-dependent styles in @media (any-hover: hover).
3. Optionally style no-hover UX with @media (any-hover: none).
4. Use :hover inside that query for live pointer feedback.

Live Preview

This device’s any-hover result via matchMedia. The sample button only gets a hover color change when (any-hover: hover) matches.

CSS Examples

Each snippet focuses on the any-hover media feature. Pair with :hover only when some input can hover. Use Try It Yourself for a live editor.

<style>
  button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
  }

  @media (any-hover: hover) {
    button:hover {
      background: #16a34a;
    }
  }
</style>

<button type="button">Save</button>

<style>
  .hint {
    display: none;
    color: #64748b;
  }

  @media (any-hover: none) {
    .hint {
      display: block;
    }
  }
</style>

<button type="button">Menu</button>
<p class="hint">Tap to open</p>

<style>
  .box {
    padding: 12px;
    border: 1px solid #64748b;
  }

  .primary::after {
    content: " primary: unknown";
  }

  .any::after {
    content: " any: unknown";
  }

  @media (hover: hover) {
    .primary::after { content: " primary: hover"; }
  }

  @media (hover: none) {
    .primary::after { content: " primary: none"; }
  }

  @media (any-hover: hover) {
    .any::after { content: " any: hover"; }
  }

  @media (any-hover: none) {
    .any::after { content: " any: none"; }
  }
</style>

<p class="box primary">hover</p>
<p class="box any">any-hover</p>

Key Takeaways