Main Content

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.


5 Responses

  1. impee says:

    thanks for the tips, i wasted over 2hrs trying to figure this out by trial and error, then came across your tutorial, and it took me 2 mins 🙂

  2. Thomas says:

    Glad to help!

  3. nautique says:

    2 hrs? Try 4 hours…..still learning!
    Finally I get it! Thank you! Thank you! Thank you!

    Can you explain that last bit of code? (just so I understand more)

    .link-black a:visited:hover {color: #0098cb;} <– UPDATED – You’ll need this to fix hover issues.

    You indicated in IE you need all 5 tags…Are you referring to the 6 lines of code? ….or did you mean 6?

    Thanks for the help! I’ll be back!

  4. Thomas says:

    .link-black a:visited:hover is needed so when someone clicks on the link, and then they come back and hover over it again, the hover will work.

Leave a Reply