This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

:hover

Summary

The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it

The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it. Typically, a browser applies this pseudo-class when the mouse pointer hovers over a box generated by the element.

Note that not all pointing devices let the user designating without activating an element (e.g. pen or touch-interactions)

Examples

The following example sets the hover style of an anchor. When the user hovers the mouse pointer over a link, the text appears in bold red, over a beige background.

a:hover { color:red; background-color:beige; font-weight:bolder; }

Usage

 The :hover pseudo-class is often used with :active, :link, and :visited; which are the pseudo-classes that affect the other states of a link.

Indiscriminate use of the :hover pseudo-class can negatively impact page performance.

Notes

The order of pseudo-classes is important. For example, the style rule for :hover must occur after any :link rule or any :visited rule to prevent the pseudo-classes from hiding each other.

IE8-11 suffer from a bug where hovering over an element and then scrolling without moving the mouse/pointer leaves said element in :hover state.

Related specifications

CSS 2.1
W3C Recommendation
Selectors Level 3
W3C Recommendation
Selectors Level 4
W3C Working Draft

Attributions