The hover CSS @media media feature can be used to apply styles based on 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.

Example

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 compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support 38 [1] No support[2] 20 or earlier (12) Nightly build 28 9 [3]
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 50 No support[2] 36 ? 9.2

[1]: In Chrome <41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad; see Chromium bug #441613.

[2]: bug 1035774 – Implement Interaction Media Features including pointer:coarse that replaces non-standard -moz-touch-enabled

[3]: Implemented in WebKit bug #134822.

See also

Document Tags and Contributors

 Last updated by: scriptex,