html - CSS On hover 改变另一个元素

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>