title: CSS On hover change another element
body: <p>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</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar-inverse .navbar-nav &gt; .active &gt; a {
      color:#fff;
  }
  
  .navbar-inverse .navbar-nav &gt; li &gt; a:hover {
      color:#fff;
  }
  
  .navbar-inverse .navbar-nav &gt; li:not(.active):hover ~ .active &gt; a {
      color:#D4D4D4;
  }
  </code></pre>
  
  <p>As I told, it works but it doesn't work when <code>.active</code> if before hovered element. Example: It works when "Contact" is <code>.active</code> but it doesn't work when Home is <code>.active</code>. How to make it work?</p>