CSS On hover change another element

Question

I have a problem with my CSS. I want to change element when I hover on another element. It works but not perfectly. My code: 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;
}

As I told, it works but it doesn't work when .active if before hovered element. Example: It works when "Contact" is .active but it doesn't work when Home is .active. How to make it work?

Answer 1

Here is a CSS only solution.

.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>