Web/CSS/@media/hover

From Get docs


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 4The definition of 'hover' in that specification. Candidate Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
hover media feature

Chrome Full support 38

Notes'

Full support 38

Notes'

Notes' Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.

Edge

Full support 12

Firefox

Full support 64

IE

No support No

Opera

Full support 28

Safari

Full support 9

WebView Android Full support 38

Notes'

Full support 38

Notes'

Notes' Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.

Chrome Android

Full support 50

Firefox Android

Full support 64

Opera Android

Full support 28

Safari iOS

Full support 9

Samsung Internet Android

Full support 5.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.'
See implementation notes.


hover by Mozilla Contributors is licensed under CC-BY-SA 2.5.