HOVERING

This script only works with IE and Netscape 6 or higher. However your link colors you define will work. The only thing that will not work is the hover effect.

The following code will add some life to your webpages by using hover class for your links.

By using CSS you can add some cool effects to your website. For example: move your pointer over the link Developing Webs. That was kewl!! I will explain a little about how to do this and even give you the code so you can go try it out for your self.

First thing is to remember is that you define your CSS between the That way your browser knows how to handle your code.

Next you must tell the browser that it is going to be handling Style Sheet code. This is done by putting

A:visited

is your anchor just like in creating a link for html. MY LINK

A:visited

The :visited is your class. Just like when you define your link colors in your body of your html code. .
:visited, :link and :active are the classes that define your visited, active, link colors and text-decoration properties.

A:visited {color: #FFBF00; text-decoration: none}

color: sets the color of the link text and text-decoration: sets how you want the text to look. for example you can set your text color by either putting the hex number (color: #3300CC) or by typing the word of the color (color: blue). You can set your to text-decoration: underline or : overline or : line-through or even : blink. This can be used for all your visited, link, active or even hover classes.

A:hover {cursor: crosshair; color: #C0FFC0; background-color: lightslategray; text-decoration: none}

This is the little gem that does the neat stuff. By adding this to your code you will be able to change how your links work real time. What I mean by that is when a visitor comes to your site and hovers a mouse over a link it will call the hover class. This will give your visitors some interaction with your site. For example: if you use this A:hover {cursor: crosshair; color: #C0FFC0; background-color: lightslategray; text-decoration: none} your links on mouse hover would do this Developing Webs. Note how the cursor changed to crosshair and the text color changed to aqua and the background color of the text changed to slate. You may have saw the cursor: crosshair...that define the mouse pointer to change to cursor. there is several cursor you can use (cursor: crosshair, default, help, move, pointer or text). You also may have notice I added background-color: lightslategray...this changes the background color of the link text. You can use hex code or type the name of the color here.

This is what your code looks like when you put it together.

Also one more thing if you use this for your website do not define your link colors in your tag

Please feel free to copy and paste this code below and play around with it.