:hover

Article
10/10/2017

Sets the style of an element when the user moves the pointer over the element.

Syntax

:hover { sRules }

Possible values

sRules

String that specifies one or more cascading style sheet attribute/value pairs.

Remarks

Hover means that the user has positioned the pointer over the element but has not clicked or otherwise activated the element. If the user passes the pointer over a link, for example, the style reverts to its usual state when the 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 or :visited rules to prevent the pseudo-classes from hiding each other.

Internet Explorer 7 and later versions, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element (not only to 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 adversely affect page performance.

Examples

The following example sets the hover style of an anchor. When the user hovers the 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 types 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 Cascading Style Sheets (CSS), Level 2, Revision 1 (CSS2.1) Ee371281.xtlink_newWindow(en-us,Expression.40).png .

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=hidden, 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, plaintext, pre, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xmp