Question

I am trying to style a menu, and am having troubles styling the “a tag” inside of the html table.
My default a tag styles are:

a:link { color : #69bfc8; text-decoration : none;}
a:visited {color : #69bfc8; text-decoration : none;}
a:hover {color : #606060; text-decoration : none;}

And the styles for the menu are:

td.menu {font-size: 9pt; width:150px; height:7px; border-bottom: 1px solid #e0e0e0;}
td.menu:hover {background: #69bfc8; color: #FFFFFF; } 
td.menu div {padding: 3px;}

The problem Im having is the color attribute isnt applied to “a tags” within the td element upon the hover event. It seems to remain compliant with the default styles. Now I know for sure, that this is more of lacking of my knowledge of CSS, so I dont mean to seem ignorant if I am missing some crucial principle. I just wasnt sure how to ask google this question.

So my question is, what am I missing, how do I style “a tags” within the td element, upon hover of the td element??

Any help is appreciated, thanks, Lea.

Answer 1

The anchor tags don’t inherit text-specific styles, so you need to set them implicitly:

td.menu:hover a { color: #FFFFFF; }

Just remember that IE6 won’t fire the td:hover, so it might be better to change your code around a bit, so the anchor tag itself covers the whole space of the td, and then do:

td.menu a:hover { background: #69bfc8; color: #FFFFFF; }