Using CSS to Control Multiple Hover Text Colors
I found a great new CSS trick today to control the hover text color for different links on a page. Basically you add five class’ to your CSS file.
/* black links with blue rollover */
.link-black {color: #000000;}
.link-black a:link {color: #000000;}
.link-black a:visited {color: #000000;}
.link-black a:hover {color: #0098cb;}
.link-black a:active {color: #0098cb;}
.link-black a:visited:hover {color: #0098cb;} <– UPDATED - You’ll need this to fix hover issues.
Then, on your page you’d surround your links with a tag that contained the style.
< p class="link-black">
<a href="2">poker</a>
<a href="3">texas</a>
<a href="4">doctor</a>
< /p>
That’s it! All the links in that paragraph tag should now have the link-black style. One thing to keep in mind though is that Internet Explorer requires that you have ALL five tags. If you only have a few of them, IE will not use any, however Firefox and Safari work fine with only a few.
