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, but only when "hovered"
/* (see above for more specific definiton) */
a:hover {
background-color: gold;
}
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 presents major problems on touch screens. 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.Syntax
:hover
Examples
Example 1: basic
HTML
<p><a href="#">This link will have a gold background when you hover over it.</a></p>
CSS
a:hover { background-color: gold; }
Result
Example 2: Gallery with full-size images and previews
You can use the :hover pseudo-class to build an image gallery with full-size images shown only when the mouse goes over a thumbnail. See this demo for a possible cue.
:checked pseudo-class (applied to hidden radioboxes), see this demo, taken from the En/CSS/:checked page.Specifications
| 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 | Can 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. |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
for <a> elements |
0.2 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 4.0 | 2.0.4 (419) various bugs before |
| for all elements | 0.2 | (Yes) | 1.0 (1.7 or earlier) | 7.0[1][2] | 7.0 | 2.0.4 (419) various bugs before |
| for pseudo-element | ? | (Yes) | 28 (28) | ? | ? | ? |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | ? | ? | ? | ?[3] |
[1] In IE8-11, hovering over an element and then scrolling up/down without moving the pointer will leave the element in :hover state until the pointer is moved. See IE bug 926665.
[2] In IE9 (and possibly earlier), if a <table> has a parent with a non-auto width and overflow-x: auto;, and the <table> has enough content to horizontally overflow its parent and there are :hover styles set on elements within the table, then hovering over said elements will cause the <table>'s height to increase. Here's a live demo that triggers the bug. One workaround for the bug is to set min-height: 0%; on the table's parent element (and the % unit must be specified; 0 and 0px don't work). There was a bug raised as jQuery ticket #10854, but it has been closed, because it is not considered a jQuery bug.
[3] As of Safari Mobile for iOS 7.1.2, tapping a clickable element causes the element to enter the :hover state. The element will remain in the :hover state until a different element has entered the :hover state.