Changing anchor font color during a <td> hover?
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;
bac开发者_如何学运维kground:white;
a:active { color:red; }
}
Thanks!
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;}
The :hover
won't work in IE6 which supports only links. However, the workaround is to use whatever hover
Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows using only CSS. IE however, has an erratic support for :hover at best, depending on the particular version your visitor is using.
Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Version 3 introduces ajax support, meaning that any html that gets inserted into the document via javascript will also trigger :hover, :active and :focus styles in IE.
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.
table table td:hover {
background: #89A6A1;
}
table table td:hover * {
color: black !important;
}
精彩评论