W3cubDocs

/CSS

@media.hover

The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.

Syntax

The hover feature is specified as a keyword value chosen from the list below.

none
The primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap), or there is no primary pointing input mechanism.
hover
The primary input mechanism can conveniently hover over elements.

Examples

HTML

<a href="#">Try hovering over me!</a>

CSS

@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}

Result

Specifications

Specification Status Comment
Media Queries Level 4
The definition of 'hover' in that specification.
Candidate Recommendation Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
hover media feature 38
38
Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
12 64 No 28 9
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
hover media feature 38
38
Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
50 64 28 9 5.0

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover