1. As you know there are four states of a link, namely: Initial State, Visited State, Mouse Over State and Active State. For example if you were to put the following code between <head></head> tags in the page, all the link states in that page would be red. Which means when you visit the page you will see all the links in read, and when you click on them or hover on them you will not see any change. Because all the link states have been defined to be red. Let's take our tutorial from here.
| <style type="text/css"> <!-- a:link { color: red; } a:visited { color: red; } a:hover { color: red; } a:active { color: red; } --> </style> |
2. How about if I want to make my links without underline when someone mouse overs on them? You just have to add a new state text-decoration: none; to the a:hover area between {} braces.
| a:hover { color: red; text-decoration: none; } |
Example: Mouse Over Me
So if you don't want to have underline on your links at all, just add text-decoration: none; to all the 4 states and your links will not have underline.
3. How about adding a background to our links when somebody mouseOvers on them? For that you have to add background-color: to the hover state like this:
| a:hover { color: red; text-decoration: none; background-color: #CCCCCC; } |
Example: Mouse Over Me
4. You can also change the cursor when somebody mouse overs on your link. Let's change the cursor to a help icon when somebody mouseOvers on our links.
| a:hover { color: red; text-decoration: none; cursor: help; } |
Example: Mouse Over Me
Other cursor states that you can use are:
|
Be
careful when you are using some of the cursor states on your links,
because if they are used improperly it might confuse the users a great
deal.
More HTML and CSS: 
