Creating Rollover Text Links With CSS

Using CSS, it is fairly easy to give text hyperlinks a rollover or hover effect. Here is an example of the effect, but it doesn't work in Netscape 4.x:

This is a sample link

Notice that the dark blue text becomes light blue when you move the mouse cursor over the text.

That rollover effect is created by adding four pseudo-class selectors to the style sheet, and they must be in this order: link, visited, hover, and active. Here is how the pseudo-classes would appear in a style sheet (choose colors that suit your site):

a:link {color: #000000;}
a:visited {color: #006699;}
a:hover {color: #CC9900;}
a:active {color: #000000;}

If you want to eliminate the underline from the links, just add text-decoration: none; after the color selection, as in the following example:

a:link {color: #000000; text-decoration: none;}
a:visited {color: #006699; text-decoration: none;}
a:hover {color: #CC9900; text-decoration: none;}
a:active {color: #000000; text-decoration: none;}