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)
ExamplesThe 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; }
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.
NotesThe 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 specificationsMicrosoft Developer Network: [Windows Internet Explorer API reference Article]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4