2 out of 8 rated this helpful - Rate this topic

:hover pseudo-class

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

Syntax

selector :hover {...}

Parameters

selector: A CSS simple selector

Standards information

CSS 2.1, Section 5.11.3

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.

Important There is no concept of "hover" on touch-enabled devices. To learn more about using the :hover pseudo-class on touch-enabled devices in Internet Explorer 10, see Using aria-haspopup to simulate hover on touch-enabled devices.

Starting with Windows Internet Explorer 7, when the browser is in standards-compliant mode (strict !DOCTYPE), you 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.

Click to view sample.

HTML


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

Click to view sample.

HTML


<!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>

Send comments about this topic to Microsoft

Build date: 11/29/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Additions

ADD