Question

I am bit stuck with understanding how to include 2 different hover properties in the same page. I want to have a different hover effect for my navbar than I do for certain content in my webpage.

My current CSS is as follows:

a:hover {
    color: #CCC;
    background-color: #D8D8D8;
    cursor: default;
}

Assuming I just want to change the background color from one link to the next, how would the above change?

Answer 1

You could use different classes for your links:

<a class="typeA">foo</a>
<a class="typeB">bar</a>

a.typeA:hover {
    color: #CCC;
    background-color: #D8D8D8;
    cursor: default;
}

a.typeB:hover {
    color: #C0C;
    background-color: #fc0;
    cursor: default;
}