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 中稍后出现的元素，而不是以前出现的元素，因此将鼠标悬停在第一个 元素上会影响具有以下 CSSli的当前元素：li.active

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

JS 小提琴演示。

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

但是，以下方法会起作用：

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

JS 小提琴演示。

Answer 2

试试这个：

ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }

这有几个条件：

1. 支持:not伪标签的浏览器
2. ul不能有太多的填充或空白空间，否则您可以激活的:hover而不将ul鼠标悬停在任何lis

Answer 3

这对我有用：

.dvchange1 {
  color:#fff;
    }
    .dvOne:hover .dvchange2 {
        color:#000;
    }

 <div class="dvchange1 dvchange2">
    <span class="">
    Hello
    <span>
    </div>