CSS - Pseudo-class :hover


Advertisements


Description

The :hover pseudo-class is used to add special effect to an element when you mouse over it.

While defining pseudo-classes in a <style>...</style> block, following points should be taken care −

  • a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

  • a:active MUST come after a:hover in the CSS definition in order to be effective.

  • Pseudo-class names are not case-sensitive.

  • Pseudo-class are different from CSS classes but they can be combined.

Possible Values

  • color − Any valid color value.

Applies to

Anchor / Link element.

Example

Following is the example which demonstrates how use :hover class to change the color of links when we bring a mouse pointer over that link.

<html>
   <head>
      <style type="text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>
   <body>
      <a href="/html/index.htm">Bring Mouse Here</a>
   </body>
</html> 

This will produce following link. Now you bring your mouse over this link and you will see that it changes its color to yellow.



Advertisements