CSS3 disable hover effect selectively

Problem

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?

Problem courtesy of: bdx

Solution

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;
}
Solution courtesy of: 3dgoo

Discussion

You can try this:

#result-side-menu li.li-no-hover:hover {
  opacity:1;
}
Discussion courtesy of: Sirajus Salayhin

This recipe can be found in it's original form on Stack Over Flow.