Introduction
Have you ever wondered how to make your text links change color, size or font on mouse-over? Well, these samples below show you how to place the code in your html document and adjust the settings to your own needs.Step 1: The Code
Copy the code below and paste it between the and the tag in your html document, or paste it into your .css file without the:""
What does it mean?
a:link = The default appearance of your text links.
a:visited = When the link has been clicked.
a:active = When the link is being clicked.
a:hover = When the mouse is over the link.
Now you can modify the color settings and the text decorations to fit your page.
Here are some decorations you can use:
- underline
- overline
- line-through
Step 2: Changing font and size on mouseover
If you want to change the font and the font-size on mouseover, you can do it like this:(I have decided to put a:visited and a:active in the same style because they have the same styles.)
Step 3: Changing the background color
You can also change the background color of your text link.
I hope this helps you figure out how to use this effect on your own page.
You can find more CSS tutorials at tutorialvault.net