CSS any-hover Media Feature

What You’ll Learn

The any-hover media feature lets you detect whether any input on the device can hover. Adapt layouts for touch screens vs mouse-driven desktops without guessing from screen width alone.

Introduction

The @media rule in CSS applies styles based on device characteristics. The any-hover media feature answers a simple question: can any input mechanism on this device hover over elements?

This is especially useful for responsive design. A wide tablet might look like a desktop by screen size, but if the user is touching the screen, hover-only menus and tooltips will feel broken. any-hover helps you choose the right default experience.

Definition and Usage

Wrap CSS rules inside @media (any-hover: hover) or @media (any-hover: none). The browser evaluates the device’s available inputs — mouse, trackpad, stylus, touch screen — and applies matching styles.

📝 Syntax

The syntax for the any-hover media feature inside an @media rule is:

@media (any-hover: value) {
  /* CSS rules here */
}

Accepted Values

• hover — At least one input mechanism can hover over elements (typical desktop with a mouse or trackpad).
• none — No input mechanism can hover, or there is no pointing device (typical phones and tablets).

Basic Example

button {
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
}

@media (any-hover: hover) {
  button {
    background-color: #93c5fd;
  }
}

@media (any-hover: none) {
  button {
    background-color: #fca5a5;
  }
}

any-hover vs hover Media Feature

Default Value

There is no CSS default value for any-hover. The browser reports the actual device capability at runtime.

Syntax Rules

• Use inside an @media block with parentheses: (any-hover: hover).
• Only two values are valid: hover and none.
• Combine with other media features: @media (any-hover: hover) and (min-width: 768px).
• Do not confuse with the :hover pseudo-class — they solve different problems.
• Prefer any-hover over hover when hybrid devices matter.

Related Topics

• :hover pseudo-class — style elements while the pointer is over them
• :focus pseudo-class — keyboard focus indicators
• any-pointer — detect whether any input can point accurately

When to Use any-hover

Reach for any-hover when interaction method matters more than screen size:

• Progressive enhancement — Add hover-only animations when a pointing device is available.
• Navigation menus — Use dropdown-on-hover for desktop and tap-to-open for touch.
• Tooltips — Show extra info on hover-capable devices; keep labels visible on touch.
• Card actions — Reveal edit/delete buttons on hover; keep them always visible on touch.
• Hybrid laptops — Prefer any-hover over hover when both touch and mouse may be present.

Examples Gallery

Practice any-hover with buttons, navigation, cards, and media feature comparisons.

button {
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
}

@media (any-hover: hover) {
  button {
    background-color: #93c5fd;
  }
}

@media (any-hover: none) {
  button {
    background-color: #fca5a5;
  }
}

nav a {
  color: #334155;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
}

@media (any-hover: hover) {
  nav a:hover {
    text-decoration: underline;
    color: #2563eb;
  }
}

@media (any-hover: none) {
  nav a:active {
    color: #2563eb;
  }
}

.card {
  position: relative;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

@media (any-hover: hover) {
  .card-actions {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .card:hover .card-actions {
    opacity: 1;
  }
}

@media (any-hover: none) {
  .card-actions {
    opacity: 1;
  }
}

/* Primary input only — may miss connected mouse */
@media (hover: hover) {
  .tip { display: none; }
  .item:hover .tip { display: block; }
}

/* Any input — safer for hybrid devices */
@media (any-hover: hover) {
  .enhanced { cursor: pointer; }
  .enhanced:hover { background: #eff6ff; }
}

@media (any-hover: none) {
  .tip { display: block; }
}

💬 Usage Tips

• Pair with :hover — Use any-hover to decide whether to enable hover effects; use :hover for the actual pointer-over styling.
• Touch-safe defaults — Start with styles that work without hover, then enhance with @media (any-hover: hover).
• Do not use width alone — Large touch screens break the assumption that wide viewports mean mouse users.
• Combine media features — Mix with min-width, prefers-reduced-motion, or any-pointer for finer control.
• Test real devices — Emulators may not report hover capability accurately; verify on phones and laptops.

⚠️ Common Pitfalls

• Hiding critical UI — Never hide essential buttons or links behind hover-only patterns without a touch fallback.
• Confusing with :hover — any-hover does not fire when the user moves the mouse; it is evaluated once based on device capability.
• Assuming mobile = none — Some tablets with styluses or connected mice may report hover.
• Replacing accessibility — Keyboard users still need :focus styles regardless of hover capability.
• Overusing media queries — Simple sites may not need hover detection; use it when interaction patterns genuinely differ.

♿ Accessibility

• Progressive enhancement — Ensure all actions are reachable without hovering, especially on any-hover: none devices.
• Visible focus indicators — Mirror interactive affordances with :focus or :focus-visible styles.
• No hover-only information — Tooltips and extra details must have a non-hover way to access them.
• Large touch targets — On touch devices, make buttons and links at least 44×44 CSS pixels.
• Reduced motion — Respect prefers-reduced-motion when adding hover animations.

💡 Best Practices