Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

:hover pseudo-class

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

CSS 2.1, Section 5.11.3

Syntax

selector :hover {...}

Parameters

selector

A CSS simple selector

Standards information

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 Windows Store apps using JavaScript, see Using aria-haspopup to simulate hover on touch-enabled devices.

Examples

This example uses :hover to change the div element background color to white when the mouse pointer hovers over any of the three div elements on the page.

Code example: http://samples.msdn.microsoft.com/workshop/samples/css/css_hover/css_hover.html


div {
   width: 150px;
   height: 150px;
   float: left;
   margin-right: 10px;
}
div:hover {
  background-color: white;
}
.circle {
   background-color: aqua;
   background-image: url(circle.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
}
.square {
   background-color: aquamarine;
   background-image: url(square.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
}
.triangle {
   background-color: bisque;
   background-image: url(triangle.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
}


<body>
   <div class="circle"></div>
   <div class="square"></div>
   <div class="triangle"></div>
</body>

 

 

Show:
© 2014 Microsoft