Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

:hover

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

:hover { sRules }

sRules

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

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.

Ee371281.alert_note(en-us,Expression.30).gifNote:

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.

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>

A, ABBR, ACRONYM, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, 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, LI, OL, P, S, SELECT, SPAN, SUB, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.