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?

Problem courtesy of: bdx


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


You can try this:

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

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