悬停其他人li标签时更改活动类的颜色[重复]答案

【问题标题】：Change color on active class when hover others li tag [duplicate]悬停其他人li标签时更改活动类的颜色[重复]
【发布时间】：2022-01-25 08:18:34
【问题描述】：

当悬停其他 li 标签时，我想在活动类上将 color 更改为 #000

li:hover ~ li.active {
    color: #000
}

li {
    display: inline-block;
    margin: 30px;
    padding: 10px;
}

li.active {
    color: red;
}

li:hover {
    color: red;
}

/* How to do this */
li:hover ~ li.active {
    color: #000
}

<nav>
    <ul>
        <li class="active">Home</li>
        <li>About</li>
        <li>Hello</li>
    </ul>
</nav>

【问题讨论】：

标签： css css-selectors

【解决方案1】：

正如@MoaazBhnas 所说，~（通用兄弟选择器）选择下一个兄弟，因此它不适用于此顺序。但是，您可以使用以下命令更改订单的外观：

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

然后您可以将您的nav 设置为position: absolute;，它将处于您想要的行为的初始位置。

li {
    display: inline-block;
    margin: 30px;
    padding: 10px;
}

li.active {
    color: red;
}

li:hover {
    color: red;
}

/* How to do this */
li:hover ~ li.active {
    color: #000
}

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

nav {
  position: absolute;
}

<nav>
  <ul>
    <li>About</li>
    <li>Hello</li>
    <li class="active">Home</li>
  </ul>
</nav>

【讨论】：

【解决方案2】：

~（通用兄弟选择器）选择下一个兄弟。

它在您的示例中不起作用，因为li.active 是第一个项目（previous 元素）并且不能被~ li.active 选择，所以如果您重新订购您的项目要使li.active 成为最后一项，您的代码将起作用：

<nav>
  <ul>
    <li>About</li>
    <li>Hello</li>
    <li class="active">Home</li>
  </ul>
</nav>

查看著名的Stack Overflow thread，了解选择前一个兄弟姐妹的技巧。

【讨论】：

如果你不想改变项目的顺序，你可以用 JavaScript 轻松解决。
@MaazBhnas +1 我很好的回答。但是，您可以仅使用 CSS 来反转顺序。这有点hacky，但它可以解决问题。看我的回答。