okay basically, I have a <td> that is acting as a button.
Inside the td:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<div>
<span class="linkBigText">HOME</span>
<br />
<span class="linkSmallText">the home page</span>
</div>
</a>
the "linkBigText" and "linkSmallText" classes are just font modifiers.
My question is, how would I do a CSS rollover effect that switched the colors of these two?
Thanks.you cannot affect other element that are not a child element just using css;
here you will have to use some javascript.Lerura means that you cannot use the hover pseudoclass on childnodes nested within A tags cross-browserly without resorting to JavaScript because Internet Explorer has problems. Might as well code using both the CSS hover pseudoclass and JavaScript onmouseover and onmouseout event handlers.
My idea is to use JavaScript onmouseover, to add a class "hover" to the element's classes, and onmouseout, remove the extra class "hover" from the element. Then the CSS would be as easy to manage as:
td a div span.linkBigText {color:red;}
td a:hover div span.linkBigText, td a.hover div span.linkBigText{color:blue;}
td a div span.linkSmallText{color:blue;}
td a:hover div span.linkSmallText, td a.hover div span.linkSmallText{color:red;}
Notice the a:hover to a.hover difference.Ahh, works perfectly. Thank you much.
Inside the td:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<div>
<span class="linkBigText">HOME</span>
<br />
<span class="linkSmallText">the home page</span>
</div>
</a>
the "linkBigText" and "linkSmallText" classes are just font modifiers.
My question is, how would I do a CSS rollover effect that switched the colors of these two?
Thanks.you cannot affect other element that are not a child element just using css;
here you will have to use some javascript.Lerura means that you cannot use the hover pseudoclass on childnodes nested within A tags cross-browserly without resorting to JavaScript because Internet Explorer has problems. Might as well code using both the CSS hover pseudoclass and JavaScript onmouseover and onmouseout event handlers.
My idea is to use JavaScript onmouseover, to add a class "hover" to the element's classes, and onmouseout, remove the extra class "hover" from the element. Then the CSS would be as easy to manage as:
td a div span.linkBigText {color:red;}
td a:hover div span.linkBigText, td a.hover div span.linkBigText{color:blue;}
td a div span.linkSmallText{color:blue;}
td a:hover div span.linkSmallText, td a.hover div span.linkSmallText{color:red;}
Notice the a:hover to a.hover difference.Ahh, works perfectly. Thank you much.