Adding a hover effect to your links with CSS
Where normally you specify the colour of links in the body of a HTML document with
Code:
<body link="color" vlink="color" alink="color">
Now you can add another effect called
hover. Basically when you "mouse over" the link
you can get the link background, color, size, font, underline etc to change.
This is done by adding the following code to the <HEAD> section of your document:
Code:
<HEAD>
<style type="text/css">
<!--
a:link {color:#000000 ; text-decoration: none; }
a:active {color: #000033; text-decoration: none; }
a:visited {color: #000066; text-decoration: none; }
a:hover {color: #003300; text-decoration: underline; }
-->
</style>
</HEAD>
Example Notes:
Color: You can substitute the colours above with whatever colour you want.
Text-decoration: This is usually underline, overline, line-through, blink or none.
You can also add to that any number of stylings such as
{ font-family: verdana; font-weight: bold; font-size: 12pt; background-color: #123456 }
and so on...but thats another story...
Hover effects 2 will cover having a number of different hover effects in one document.
I apologise for any errors or ommisions.
Questions or feedback would be greatly appreciated.
+
