:hover

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.

Note: The :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

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.

Note: For an analogous effect, but based on the :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.

See also

Document Tags and Contributors

 Last updated by: mfluehr,