Question

I have menu which the active item has an active class on load, which changes its background.

The hover of other items change the background of hovered item.

<ul>
  <li></li>
  <li class="active"></li>
  <li></li>
</ul>

<style>
  li:hover, li.active {background:black}
</style>

Is there any way to remove active class background on other items hover in pure CSS. something like:

li.hover .active {background:none}

This works if active is under li, but doesn’t work here.

Answer 1

This isn’t reliably possible with CSS, as CSS can only affect elements that appear later in the DOM, not previously, so hovering over the first li can affect the current li.active element with the following CSS:

li:hover ~ li.active {
    background-color: #f00; /* or whatever */
}

JS Fiddle demo.

But hovering over the third li cannot affect the same li.active element.

However, the following would work:

ul:hover li.active {
    background-color: transparent;
}

JS Fiddle demo.