:hover Pseudo-class

  • Article

Sets the style of an element when the user hovers the mouse pointer over the element.

Syntax

HTML :hover { sRules }
Scripting N/A

Possible Values

sRules String that specifies one or more Cascading Style Sheets (CSS) attribute/value pairs.

Remarks

Hover means that the user has positioned the mouse pointer over the element but has not clicked, or otherwise activated the element. If the user simply passes the mouse pointer over a link, for example, the style reverts to its usual state when the mouse pointer is removed. 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.

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

Windows Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not only links. If the pseudo-class is not applied specifically to an element in the selector, such as the A tag, the Universal (*) Selector is assumed. Indiscriminate use of the :hover pseudo-class can negatively impact page performance.

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.

<style>
    a:hover { color:red; background-color:beige; font-weight:bolder; }
</style>

<a href="#below">Click here to move to the bottom of this page.</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="below"></a>

The following example demonstrates the type of effects you can achieve without script by using the :hover pseudo-class in Internet Explorer 7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<style type="text/css">
    body:hover { background: url("wlbigielogo.gif") no-repeat center center; }
    h1:hover   { color: red; }
    img        { vertical-align: middle; }
    .zoom img  { zoom: 0.5; }
    img:hover  { zoom: 1.0; cursor: hand; }
    img.spacer { width: 0px; height: 30px; }
</style>
</head>
<body>
<h1>Hover Here</h1>
<img class="spacer" src="blank.gif">
<span class="zoom">
<img src="A.gif">
<img src="B.gif">
<img src="C.gif">
. . .
<img src="X.gif">
<img src="Y.gif">
<img src="Z.gif">
</span>
</body></html>

Standards Information

This pseudo-class is defined in CSS, Level 2 Revision 1 (CSS2.1) World Wide Web link.

Applies To

A, ABBR, ACRONYM, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FORM, hn, HTML, I, IMG, INPUT, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR