Web/CSS/ 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 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.

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

Syntax

:hover

Examples

Basic example

HTML

<a href="#">Try hovering over this link.</a>

CSS

a {
  background-color: powderblue;
  transition: background-color .5s;
}

a:hover {
  background-color: gold;
}

Result

Image gallery

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.

Note: For an analogous effect, but based on the :checked pseudo-class (applied to hidden radioboxes), see this demo, taken from the :checked reference page.

Specifications

Specification	Comment	Feedback
HTML Living StandardThe definition of ':hover' in that specification.		WHATWG HTML GitHub issues
Selectors Level 4The definition of ':hover' in that specification.	Allows `:hover` to be applied to any pseudo-element.	CSS Working Group drafts GitHub issues
Selectors Level 3The definition of ':hover' in that specification.
CSS Level 2 (Revision 1)The definition of ':hover' in that specification.	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`:hover`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 4	Safari Full support 2	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1 Notes' Full support 1 Notes' Notes' As of Safari 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.	Samsung Internet Android Full support 1.0
`<a>` element support Non-standard'	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 4	Safari Full support 2	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
All elements support Non-standard'	Chrome Full support 1	Edge Full support 12 Notes' Full support 12 Notes' Notes' In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the `:hover` state until the pointer is moved. See bug 5381673.	Firefox Full support 1	IE Full support 7 Notes' Full support 7 Notes' Notes' In Internet Explorer 8 to Internet Explorer 11, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the `:hover` state until the pointer is moved. See bug 926665. Notes' In Internet Explorer 9 (and possibly earlier), if a `<table>` has a parent with a non-`auto` `width`, `overflow-x: auto;`, 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. See a live demo that triggers the bug. One workaround for the bug is to set `min-height: 0%;` (the `%` unit must be specified, since unitless and `px` don't work) on the `<table>`'s parent element.	Opera Full support 7	Safari Full support 2	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Pseudo-element support	Chrome Full support 1	Edge Full support 12	Firefox Full support 28	IE Full support 11	Opera Full support 15	Safari Full support 2	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 28	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
Non-standard. Expect poor cross-browser support.': Non-standard. Expect poor cross-browser support.
See implementation notes.': See implementation notes.