CSS 悬停时更改另一个元素

Question

我的 CSS 有问题。当我将鼠标悬停在另一个元素上时，我想更改元素。它有效，但并不完美。我的代码：HTML

<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS：

.navbar-inverse .navbar-nav > .active > a {
    color:#fff;
}

.navbar-inverse .navbar-nav > li > a:hover {
    color:#fff;
}

.navbar-inverse .navbar-nav > li:not(.active):hover ~ .active > a {
    color:#D4D4D4;
}

.active正如我所说，它可以工作，但如果在悬停元素之前则不起作用。示例：当“Contact”为 时它有效，.active但当 Home 为 时它不起作用.active。如何让它发挥作用？

Answer 1

这是一个仅 CSS 的解决方案。

.navbar-inverse {
    background-color: black;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > li > a:hover {
    color:#fff;
}

.navbar-inverse .navbar-nav:hover > li.active > a {
    color:#D4D4D4;
}

<div class="navbar-inverse">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="active"><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>