CSS hover Media Feature

Definition and Usage

The hover media feature tests whether the user’s primary input can conveniently hover over elements.

Use @media (hover: hover) for mouse/trackpad-first devices and @media (hover: none) for touch-first phones and tablets (or when there is no primary pointing input). It is not the same as the :hover pseudo-class — the media feature is a capability query; :hover is live pointer-over styling.

CSS Syntax

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

Feature Values

How to Use hover

Ship usable defaults first, then add hover-only enhancements.

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

Live Preview

This device’s primary hover capability, via matchMedia. The sample button only gets a hover color change when (hover: hover) matches.

CSS Examples

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

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

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

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

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

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

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

<style>
  a {
    color: #1d4ed8;
    text-decoration: underline;
  }

  @media screen and (hover: hover) {
    a:hover {
      color: #16a34a;
    }
  }
</style>

<a href="#">Learn more</a>

Key Takeaways