PDA

View Full Version : Define different a.hover properties on same page


CJECulver
01-01-2007, 07:43 PM
My main site page (http://www.accardi-by-the-sea.org/InfocomGallery/) has a table. In the left cell, with a yellow background, I've set my a.hover background-color to blue. In the right cell, with a blue background, I want a.hover background-color yellow.

I'm rather a novice at CSS and styles; I've tried inline styles <a style= > and defining styles and classes up in <head>, but no luck. How do I do this?

The page in question is here: www.accardi-by-the-sea.org/InfocomGallery/ (http://www.accardi-by-the-sea.org/InfocomGallery/)

CJE Culver,
www.Accardi-by-the-Sea.org
Schelly
01-02-2007, 09:25 AM
Okay, here's your style declarations:



<!-- .menu {
a text-decoration: none;
a.hover: background-color: rgb(255, 255, 204); text-decoration: underline overline;
}
.main {
a text-decoration: none;
a.hover: background-color: rgb(156, 172, 215); text-decoration: underline overline;
}
-->
a {text-decoration: none;}
a:hover {background-color: rgb(156, 172, 215); text-decoration: underline overline;}
</style>


I see what you're trying to do with it -- listing the a attributes under a .menu or .main "header" - but css doesn't work like that.

I just threw this together but it should work. Try this in your style declarations:



<style type="text/css">
.menu a {
text-decoration: none;
}
.menu a:hover {
background-color: rgb(156, 172, 215);
text-decoration: underline overline;
}
.main {
background-color: rgb(156, 172, 215);
}
.main a {
text-decoration: none;
}
.main a:hover {
background-color: rgb(255, 255, 204);
text-decoration: underline overline;
}
</style>


Then, for your menu a hrefs use "class=menu" and in your main hrefs use "class=main". For instance, a link in the main body would look like:



<a href="http://www.google.com" target="_blank" class="main">Google</a>


A menu link iwould look like:



<a href="http://www.yahoo.com" target="_blank" class="menu">Yahoo</a>


Hope that helps!
:)
CJECulver
01-03-2007, 02:21 AM
Wow, thanks Schelly! Haven't had a chance to try your code, yet, but I will when I get home tonight. You're super!

CJ