css - css 中另一个类的悬停效果

Question

我有一个菜单，其中的事件项在加载时有一个事件类，这会改变它的背景。

其他元素的悬停会改变悬停元素的背景。

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

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

是否有任何方法可以在纯 CSS 中删除悬停在其他元素上的事件类背景。像这样的东西:

li.hover .active {background:none}

如果 active 在 li 下，这会起作用，但在这里不起作用。

Answer 1

这对于 CSS 来说是不可能的，因为 CSS 只能影响出现在 DOM 中之后的元素，而不是之前出现的元素，所以将鼠标悬停在 第一个 li 可以通过以下 CSS 影响当前的 li.active 元素:

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

JS Fiddle demo .

但是将鼠标悬停在第三个 li 上不能影响相同的 li.active 元素。

但是，以下方法可行:

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

JS Fiddle demo .