Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I create a Hover Effect on links?

Hover Effect

How do I create a Hover Effect on links?

by  cian  Posted    (Edited  )
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.

+
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top