Changing anchor font color during a <td> hover?

Question

Hi Guys,

I want to change the text color of an anchor link that sits in a table cell on a hover. However, the change I wrote in my CSS file to accomplish this, doesn't seem to work. Could someone suggest what I might be doing incorrectly?

This is what I have in my CSS file:

td:hover {
    text-align: center;
    background:white;
    a:active { color:red; }
}

Thanks!

Answer 1

Assuming those arent typos your CSS is mangled... should be:

td:hover {text-align: center; background:white;} 

a:active {color:red; text-align: center;} /* or whatever text-align value youre after here */

But keep in mind non a elements dont support the :hover pseudo element in certain browsers and versions.

Answer 2

Or elaborating on prdigitalson's sugggestion, if you only want that behavior on the anchors in the TD, you can go this way:

td:hover {text-align: center; background:white;} 
td:hover a:active {color:red; text-align: center;}

This says only change the color and alignment of active anchors in cells that you are hovering over. In general, it's a bad idea to change text alignment on hover.

Here's what I suggest

td:hover {background-color:white;}
td:hover a:active {color:red;}