: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

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]