Question

I have a html menu:

<ul>
<li><a href="#" class="active">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

and css:

ul li a{
     color: black;
}
ul li a:hover, ul li a.active{ /* it was ul li a:hover for two times */
     color: red;
}

When I’m hovering on a non-active element, there is two red elements and it is normal.
The problem is changing color for hover-element only and removing it on active (turn to black).
Is there any trick to do this without JS?

edited: there was an error. ctrl-c -> ctrl-v is evil

Answer 1

Assuming your ul element isn’t bigger than the space your li s take up:

ul:hover a.active
{
    color: black;
}

Or possibly Shawn’s answer, depending on if you’re talking about the class active or the link status.