Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here



Hover Effect

How do I create a Hover Effect on links? by cian
Posted: 18 Jan 02

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

<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:


<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; }


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.


Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close