CSS Link Hover Changes

CSS Link Hover Colors

First, I'll show you how to create a hover color. In case you're wondering what that is, so am I...oops, I mean, that's when you rest your cursor on a link and the link color changes, or the background color changes, or both, or something else happens. After that, I'll show you how to have more than one kind of link on the same page.

First off, check out the link below...place your cursor on it and watch the text and background colors change.

See what the members-only site offers.

It looks like a normal link, minus the usual underline which was removed using CSS. When you rest the cursor on it, though, the text turns green and it has a black background. Here's how I did that...in the HEAD section of my page, I placed this CSS code:

<style type="text/css">
a:link   {color: #0000ff; text-decoration: none}
a:visited {color: #C0C0C0; text-decoration: none}
a:hover  {color: #00ff00; background-color: #000000; text-decoration: none}
a:active  {color: #ff0000; text-decoration: none;}
</style>

Here's what each one of those properties does:

a:link
The color: #0000ff; sets the link color, which I made the normal blue link color; and the text-decoration: none removes the underline usually associated with a link.

a:visited
The color: #C0C0C0; sets the visited link color, and text-decoration: none removes the underline. If you don't have an underline on links, it's a good idea to remove the underline from visited links too.

a:hover
Some changes here, color: #0000ff; still sets the link color, but I changed it to green. I again removed the text-decoration, but I added background-color: #000000; to change the color of the page behind the link when the cursor is resting on it. Neato!

a:active
This is supposed to be the color a link briefly turns to when it's clicked, but I don't know how many people that works for. My computer is too fast I guess, or I'm too slow, to notice a change. About the only time I notice it is on broken links.

When you set up your link properties using CSS, be sure a:link, a:visited, a:hover, and a:active are in that exact order. Problems can occur in some browsers if they are out of order.

ť Multiple Link Colors

It is possible to have different colored links on the same page, and even have the hover property behave differently for each link style. For example, you could create links of one color for pages on your site, and links of another color for off-site links. Here are two examples of this:

Web Site Design Made Easy: this link goes to my book on this site.
eBook Farming - this link goes to another site of mine.

The first thing to notice is both links are different colors. Then if you rest your cursor on both links you can see how they each change to a different color.

In the first one I gave it canary colored text on a brown background. The second link, you probably noticed, had something a little bit different. Besides making the text black and the background sort of peachy, I added a line over and under the link on mouseover. Spiffy!

Here is the code for both links:

<style type="text/css">
a:link.low      {color: #9F0004; text-decoration: none}
a:visited.low  {color: #5B0002; text-decoration: none}
a:hover.low   {color: #D9E265; background-color: #5C3314; 
                    text-decoration: none}

a:link.high       {color: #315B46; text-decoration: none}
a:visited.high  {color: #609578; text-decoration: none}
a:hover.high    {color: #000000; background-color: #DDC99B; 
                     text-decoration: overline underline;}
</style>

I left off the active link color to simplify it a little. If you like, you can leave the active link out of the mix altogether. It's not required that you use it, just that it be in the proper place if you do.

In addition to that code, you also need to tell the browser which links should do which trick. Notice after the first set of link style code there's a .low after each type of link, and a .high after each link type in the second set of styles.

Appending a dot anything after a selector creates a class, which is just a named set of style rules for an element. Creating a named style rule means the style will only apply to the HTML elements you code with that class, rather than to all instances of that element.

Now that you see how to create a CSS class, you need to use that class with your links so the browser knows which links get the low class treatment and which get the high class treatment. Here's how to apply a link class to a link:

<a href="link.html" class="low">Some Link</a>

By adding the class="low" (from the first style) to the link, it tells the browser to use the style rules from the styles named low.

You can create as many classes as you need. I could have named one .jello if I thought the look was shaky, and the other .fish if I was floundering for a name. In other words, it doesn't matter what name you use after the dot, the rule can be .anything.

There now, that wasn't so bad was it? Say, "No Dennis, it wasn't bad at all."

I can't hear you...

Note: The hover color doesn't work in Netscape 4.x.

Web Design

Site Information

More Boogie Jack Sites

CSS Link Hover Colors