css - CSS3 ホバー効果を選択的に無効にする

Question

複数のアイテムを含む番号のないリストがあります。一部のアイテムは「見出し」で、ほとんどのアイテムはリンクです。

現在、リストには次の CSS があります。

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

他のすべてのアイテムではホバーを維持しながら、見出しリストのアイテムでのみホバーを無効にできるようにしたいと考えています。これまでの私の最善の（そしてまだ成功していない）試みは、これを行うことでした：

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

class="li-no-hover"次に、見出しリスト項目に適用します。

私がやろうとしていることを達成する方法はありますか?

Answer 1

ホバー効果を望まない要素に適用class="li-no-hover"する場合、これが必要な css です。li

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

Answer 2

これを試すことができます：

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