css - 在CSS中将鼠标悬停在另一个类上

我有一个菜单，其中活动项目具有正在加载的活动类，这会更改其背景。

悬停其他项目会更改悬停项目的背景。

<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之下，则此方法有效，但在此处不起作用。

最佳答案

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;
}

关于css - 在CSS中将鼠标悬停在另一个类上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11603980/