Question

I have a table with a tags nested inside the td tags. Problem is, when I apply a pseudo hover class over the td tag, the a tag does not respond accordingly. Now I can apply the pseudo class to the a tag as well, but the a tag does not span the entire area of the td cell. Both my background and text color changes when hovering, now the background works fine, but the text only changes color when hovering over the a tag, which does not span the entire height of the cell. I want the text color in the a tags to change when hovering over ANY part of the td tag. here is my working example: http://jsfiddle.net/gGAW5/

Thank You very much

Answer 1

All you need to do is add a second selector to your CSS for a:hover:

#rightDiv a:hover,
#rightDiv td:hover a {
    text-decoration: none;
    color: #2363b0;
}​

JS Fiddle demo.

This styles the a in its :hover state regardless of whether it’s the td or just the a itself that’s hovered over.