title: hover effect on another class in css
body: <p>I have menu which the active item  has an active class on load, which changes its background.</p>
  
  <p>The hover of other items change the background of hovered item.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li class="active"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;style&gt;
    li:hover, li.active {background:black}
  &lt;/style&gt;
  </code></pre>
  
  <p>Is there any way to remove active class background on other items hover in pure CSS. something like:</p>
  
  <pre><code>li.hover .active {background:none}
  </code></pre>
  
  <p>This works if active is under li, but doesn't work here.</p>