CSS3 disable hover effect selectively

Question

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?

Answer 1

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;
}