Question

Wait! This isn’t just another “how do you change the font color when the mouse hovers over an image/text/etc.?”

I think I can do this as a hack (by inlining the style for each piece of text), but I’ve heard that style should be separate from content. I’m fighting my hacky programmer routes and trying to become more disciplined. So I’m here to ask for the best way to do this.

I have a simple menu of links on a website I’ve made, and I’d like them to be black font (when the mouse isn’t hovering over) and then change to a color when the mouse hovers. But I’d like each to turn a different color when the mouse hovers over it.

Should I name a style for each of these colors and then declare a div when each is used? That seems almost the same as inlining the style.

I’d really appreciate your sage advice on how to do this the right way!

Answer 1

CSS:

<style type="text/css">
    a { color: black; }
    a:hover { color: grey; }
    a.green:hover { color: green; }
    a.red:hover { color: red; }
    a.blue:hover { color: blue; }
    .content a:hover, .content a.green:hover, .content a.red:hover, .content a.blue:hover { color: yellow; }
</style>

HTML:

<a href="#" class="green">green link</a>
<a href="#" class="red">red link<a>
<a href="#" class="blue">blue link</a>
<a href="#" >grey link</a>

<div class="content">
    <a href="#" class="green">yellow link</a>
    <a href="#" class="red">yellow link<a>
    <a href="#" class="blue">yellow link</a>
    <a href="#" >yellow link</a>
</div>