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.

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome 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 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android ? Chrome Android Full support 50Edge Mobile Full support 12Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9.2Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Document Tags and Contributors

Last updated by: ExE-Boss,