Developing Webs logo
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Remember to book mark this site!

Request a Tutorial


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


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


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.

"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2021 All Rights Reserved
Privacy and Legal