Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS Pseudo-class :hover


previous next AddThis Social Bookmark Button


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.

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

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

Bring Mouse Here

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements