The :hover
CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
/* Selects any <a> element when "hovered" */ a:hover { color: orange; }
Styles defined by the :active
pseudo-class will be overridden by any subsequent link-related pseudo-class (:link
, :visited
, or :active
) that has at least equal specificity. To style links appropriately, put the :hover
rule after the :link
and :visited
rules but before the :active
one, as defined by the LVHA-order: :link
— :visited
— :hover
— :active
.
:hover
pseudo-class is problematic on touchscreens. Depending on the browser, the :hover
pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.:hover
<a href="#">Try hovering over this link.</a>
a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; }
You can use the :hover
pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail. See this demo for a possible cue.
:checked
pseudo-class (applied to hidden radioboxes), see this demo, taken from the :checked reference page.Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of ':hover' in that specification. | Living Standard | |
Selectors Level 4 The definition of ':hover' in that specification. | Working Draft | Allows :hover to be applied to any pseudo-element. |
Selectors Level 3 The definition of ':hover' in that specification. | Recommendation | No significant change. |
CSS Level 2 (Revision 1) The definition of ':hover' in that specification. | Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | Yes | 1 | 4 | 4 | 2 |
<a> element support
|
1 | Yes | 1 | 4 | 4 | 2 |
All elements support | 1 | Yes
|
1 | 7
|
7 | 2 |
Pseudo-element support | ? | Yes | 28 | ? | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | ? | ? | Yes
|
? |
<a> element support
|
? | ? | ? | ? | ? | ? | ? |
All elements support | ? | ? | ? | ? | ? | ? | ? |
Pseudo-element support | ? | ? | ? | ? | ? | ? | ? |
:hover
sticky on tap on sites that set a mobile viewport
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover