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

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

CSS
Copy 

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%;
}
HTML
Copy 

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

 

 

Show: