CSS hover Media Feature

What You’ll Learn

The hover media feature detects whether the primary input can hover. Style buttons, nav, and tooltips differently for mouse users vs touch-only devices.

Introduction

Not every device supports hovering. A desktop mouse can rest over a button without clicking, triggering :hover styles. A phone touchscreen cannot — the finger touches and lifts, with no persistent hover state.

The @media (hover) feature lets you detect this before the user interacts. Apply hover-dependent effects only on capable devices, and provide tap-friendly alternatives on touch screens.

Definition and Usage

Write @media (hover: hover) for devices whose primary input can hover, or @media (hover: none) for touch-first devices. Wrap :hover rules inside (hover: hover) so they never run on touch-only hardware.

📝 Syntax

Use hover: hover or hover: none inside an @media rule:

/* Primary input can hover (mouse/trackpad) */
@media (hover: hover) {
  /* Safe to use :hover effects */
}

/* Primary input cannot hover (touchscreen) */
@media (hover: none) {
  /* Tap-friendly defaults */
}

Accepted Values

• hover: hover — Primary input can hover (typical desktop with mouse).
• hover: none — Primary input cannot hover (typical phone or tablet).

hover vs :hover Selector

hover vs any-hover

Basic Example

button {
  padding: 0.65rem 1.25rem;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 0.45rem;
  cursor: pointer;
}

@media (hover: hover) {
  button:hover {
    background: #2563eb;
  }
}

Default Value

There is no CSS default. The browser reports the primary input’s hover capability based on the device and current input mode.

Syntax Rules

• Always nest :hover rules inside (hover: hover) for touch safety.
• Use (hover: none) for always-visible controls on touch devices.
• Combine with width: @media (hover: hover) and (min-width: 48rem).
• For hybrid devices, consider any-hover when any input may hover.
• Never hide essential actions behind hover-only UI on (hover: none) devices.

Related Topics

• :hover selector — style elements while pointer is over them
• any-hover — detect hover on any input mechanism
• any-pointer — detect fine vs coarse pointer

When to Use hover

Reach for the hover media feature when input type affects UX:

• Conditional :hover effects — Enable button color changes only on hover-capable devices.
• Hover-only dropdowns — Show submenus on mouse-over; use tap menus on touch.
• Tooltips — Display on hover for desktop; show on tap or always on mobile.
• Touch-safe defaults — Ensure controls are visible without requiring hover on phones.
• Cursor styling — Apply cursor: pointer meaningfully on hover devices.

Examples Gallery

Practice the hover media feature with conditional button styles, touch-safe tooltips, navigation menus, and comparisons to any-hover.

button {
  padding: 0.65rem 1.25rem;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 0.45rem;
  cursor: pointer;
}

@media (hover: hover) {
  button:hover {
    background: #2563eb;
  }
}

@media (hover: none) {
  button {
    background: #16a34a;
  }
}

.help-wrap {
  position: relative;
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  padding: 0.35rem 0.55rem;
  background: #1e293b;
  color: #fff;
  font-size: 0.75rem;
  border-radius: 0.3rem;
  white-space: nowrap;
}

@media (hover: hover) {
  .help-wrap:hover .tooltip {
    display: block;
  }
}

@media (hover: none) {
  .tooltip {
    display: block;
    position: static;
    margin-top: 0.35rem;
  }
}

.nav-item {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  padding: 0.35rem 0;
  min-width: 8rem;
}

@media (hover: hover) {
  .nav-item:hover .submenu {
    display: block;
  }
}

@media (hover: none) {
  .submenu {
    display: block;
    position: static;
    border: none;
    padding: 0.25rem 0 0 1rem;
  }
}

/* Primary input only */
@media (hover: hover) {
  .primary-badge {
    background: #dbeafe;
    color: #1d4ed8;
  }
}

/* Any available input */
@media (any-hover: hover) {
  .any-badge {
    background: #dcfce7;
    color: #15803d;
  }
}

.badge {
  padding: 0.4rem 0.65rem;
  border-radius: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

💬 Usage Tips

• Wrap :hover rules — Put interactive hover inside (hover: hover) blocks.
• Visible on touch — Use (hover: none) to show menus and hints by default.
• Test real devices — Emulators may not match actual hover reporting.
• Hybrid laptops — Prefer any-hover when a mouse might be attached.
• Focus states too — Pair hover styles with :focus-visible for keyboard users.

⚠️ Common Pitfalls

• Confusing with :hover — Media feature = capability; pseudo-class = current state.
• Hover-only navigation — Touch users cannot reach hidden submenu items.
• Sticky hover on touch — Unwrapped :hover can stick after tap on some devices.
• Assuming desktop = hover — Touchscreen laptops may report hover: none.
• Ignoring keyboard — Hover effects alone exclude keyboard-only users.

♿ Accessibility

• No hover-only content — All information must be reachable without hovering.
• Focus-visible — Mirror hover highlights with keyboard focus styles.
• Touch targets — On (hover: none), ensure buttons are at least 44×44px.
• Tooltips — Provide persistent or tappable alternatives on touch devices.
• Reduced motion — Respect prefers-reduced-motion for hover animations.

💡 Best Practices