I want more than one link hover colour

Question

On my website, I have two sets of links but I want each set of links to have a different colour when you hover over them. So far I can only have one colour for all links on the site! Does anyone know a solution to this problem?

Answer 1

Use a class for the links you want a different color for.

jsFiddle

HTML

<a href="#">First link</a>
<a href="#" class="alt">Second link</a>

CSS

a:hover {
    color: red;
}

a.alt:hover {
    color: gray;
}

Answer 2

Give one set of links class="class1", give the other class="class2". Then your CSS can contain:

a.class1:hover {
    color: red;
}

a.class2:hover {
    color: blue;
}