CODEWITHSUNDEEP
css
StudioTime
StudioTime

Reputation: 23959

Adding active class not overriding

I'm pretty sure I'm missing something simple here; I have a collection of <LI> elements to which I add a border to on hover (actually change the opacity).

When one of them is selected I user JQuery to add a class "active" to that element. The .active class gives the element a blue border. However, if that element is hovered over it still adds the black border as well, or tries.

QUESTION: Can I somehow instruct a LI element to only show border if does not have .active class?

Here's the CSS I'm trying:

.overview li { border:1px solid rgba(0,0,0,0.0);} /* transparent border */

.overview li:hover{ border:1px solid rgba(0,0,0,0.8); } /* show on hover */

.overview li .active { border:1px solid rgba(51,204,204,0.9); } /* change color on active */

.overview li .active:hover { border:1px solid rgba(51,204,204,0.9); } /* trying to force border */

Upvotes: 0

Views: 112

Answers (2)

karthikr
karthikr

Reputation: 99620

You are adding a blank space " " too many

.overview li.active { border:1px solid rgba(51,204,204,0.9); } /* change color on active */

.overview li.active:hover { border:1px solid rgba(51,204,204,0.9); } /* trying to force border */

Basically, you were looking for any class active in the children/grandchildren nodes of li and not on the li itself.

Upvotes: 4

lonesomeday
lonesomeday

Reputation: 237827

.overview li .active means "an element which has the class 'active' and is a child of an li that is a child of an element with the class 'overview'". You mean "an li with the class 'active' that is a child of an element with the class 'overview'".

You need to do .overview li.active and .overview li.active:hover, removing the extraenous spaces.

Upvotes: 4

Related Questions