...

View Full Version : Different hover states for links on same page



Zeb
12-15-2005, 09:32 AM
I've tried using the search facility but can't seem to find exactly what I'm looking for.

The site I'm making has a menu on the left and the main area on the right and no frames are used. What I'd like to do is be able to have different colors used in the hover states for the menu to the rest of the site.

Here is some of my CSS:

a:link {color: #e0ffe0; text-decoration: none;}
a:active {color: #80ff80; text-decoration: none;}
a:visited {color: #e0ffe0; text-decoration: none;}
a:hover {color: #40ff40; text-decoration: none;}

Many thanks in advance.

Zeb
12-15-2005, 09:46 AM
Sod's law I post this request after spending ages trying to figure out and now I've gone and done it by accident!


a:link {color: #e0ffe0; text-decoration: none;}
a:active {color: #80ff80; text-decoration: none;}
a:visited {color: #e0ffe0; text-decoration: none;}
a:hover {color: #40ff40; text-decoration: none;}
a.menu:link {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
a.menu:active {font: 10px verdana; color: #80ff80; text-decoration: none;}
a.menu:visited {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
a.menu:hover {font: 10px verdana; color: #40ff40; text-decoration: none;}
a.admin:link {font: 10px verdana; color: #ff8080; text-decoration: none;}
a.admin:active {font: 10px verdana; color: #ff0000; text-decoration: none;}
a.admin:visited {font: 10px verdana; color: #ff8080; text-decoration: none;}
a.admin:hover {font: 10px verdana; color: #ff4040; text-decoration: none;}
a.player:link {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
a.player:active {font: 10px verdana; color: #80ff80; text-decoration: none;}
a.player:visited {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
a.player:hover {font: 10px verdana; color: #40ff40; text-decoration: none;}

I just use class="xxx" for whever set of colors I want to use for the link.

Thought I'd post that just in case anyone else was having a similar problem.

Bill Posters
12-15-2005, 09:57 AM
Fwiw, you should try to order your pseudo-classes as a:link, a:visited, a:hover, a:active as some browsers will fail to implement some states if that order is not used.

Additionally, you may wish to add :focus pseudo-class to the list as it is particularly useful to those who use keyboards to navigate around websites and for whom the :hover state is redundant.
If you do add it (and you probably should), then the best place to put it would seem to be between the hover and active states.

e.g.

a:link {

}

a:visited {

}

a:hover {

}

a:focus {

}

a:active {

}

ronaldb66
12-15-2005, 12:07 PM
And, since there are always more ways to reach the same point, you can simplify this:

a.player:link {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
a.player:active {font: 10px verdana; color: #80ff80; text-decoration: none;}
a.player:visited {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
a.player:hover {font: 10px verdana; color: #40ff40; text-decoration: none;} by this:

a.player {font: 10px verdana; color: ???; text-decoration: none;} //supply base link color here
a.player:visited {color: #e0ffe0;}
a.player:hover {color: #40ff40;}
a.player:active {color: #80ff80;}


Also, if all your links (or groups of links) are decendants of a single element, you can class or id that parent element and get rid of multiple a classes.

zachoff
12-15-2005, 04:31 PM
You can also make two classes for the two different link styles...

.topmenu {stuff}
.topmenu a:link {stuff}
.topmenu a:hover {stuff}
.topmenu a:visited {stuff}

.leftmenu {stuff}
.leftmenu a:link {stuff}
.leftmenu a:hover {stuff}
.leftmenu a:visited {stuff}

Bill Posters
12-15-2005, 04:40 PM
You can also make two classes for the two different link styles...

.topmenu {stuff}
.topmenu a:link {stuff}
.topmenu a:hover {stuff}
.topmenu a:visited {stuff}

.leftmenu {stuff}
.leftmenu a:link {stuff}
.leftmenu a:hover {stuff}
.leftmenu a:visited {stuff}

It's worth updating the knowledge/advice you share to take into account the 'correct' running order for the pseudo-classes, as mentioned earlier in the thread. It saves potential problems if others take your code advice literally or base their declarations upon those which they've copied and pasted directly from one of your posts.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum