MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

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.
Working Draft Initial definition.

Browser compatibility

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 Andorid 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

[3]: Implemented in WebKit bug #134822.

See also

Document Tags and Contributors

 Contributors to this page: mfluehr, alberts+, cvrebert, transoceanic2000, kscarfone, RufusCSharma
 Last updated by: mfluehr,