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 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.
[3]: Implemented in WebKit bug #134822.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
scriptex,
mfluehr,
alberts+,
cvrebert,
transoceanic2000,
kscarfone,
RufusCSharma
Last updated by:
scriptex,