CODEWITHSUNDEEP
css
bdx
bdx

Reputation: 3516

CSS3 disable hover effect selectively

I have an unnumbered list containing multiple items - some items are 'headings', most items are links.

At present, I have the following CSS for my list:

#result-side-menu li:hover {
  background-color: rgba(0,0,0,0.15);
}

I want to be able to disable the hover only on the heading list items while maintaining it on all others. My best (and still unsuccessful) attempt so far was to do this:

#result-side-menu.li-no-hover li:hover {
  background-color: none;
}

and then to apply the class="li-no-hover" to the heading list items.

Is there a way of achieving what I'm trying to do?

Upvotes: 11

Views: 50175

Answers (2)

Md Sirajus Salayhin
Md Sirajus Salayhin

Reputation: 5144

You can try this:

#result-side-menu li.li-no-hover:hover {
  opacity:1;
}

Upvotes: -1

3dgoo
3dgoo

Reputation: 15794

If you apply class="li-no-hover" to your li elements you don't want the hover effect, then this is the css you want:

#result-side-menu li.li-no-hover:hover {
    background-color: transparent;
}

Upvotes: 23

Related Questions