hide css class without js on hover

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

Your CSS looks wrong. Is that supposed to be ul li a.active, ul li a:hover rather than ul li a:hover, ul li a:hover? — BoltClock
– BoltClock, Commented Nov 22, 2011 at 15:02

Helen · Accepted Answer · 2011-11-22 15:04:55Z

3

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.

answered Nov 22, 2011 at 15:04

Helen

8115 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rmagnum2002 Over a year ago

you are welcome Alexander, but you might want to check this answer as accepted one, just so that other members could know that this issue is solved.

Shawn Steward · Accepted Answer · 2011-11-22 15:02:25Z

0

ul li a:active {
     color: black;
}

answered Nov 22, 2011 at 15:02

Shawn Steward

6,8353 gold badges29 silver badges46 bronze badges

Collectives™ on Stack Overflow

hide css class without js on hover

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related