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> 

Answer 2

As stated this is not possible with CSS using that technique but there are other references which may help you in finding a different, alternative solution that could perhaps be acceptable .

This post on CSS tricks explains what I mean.

It is quite clever in that it makes use of the parent > child relation between the elements, instead of triggering the effect when hovering over a child you trigger it when hover over the parent and you then negate the effect only for the child you're hovering.

The result of this will be that all elements will have an effect except the one you're hovering which you should set styles for.

A simple CSS example of this would be:

ul.my-nav:hover li { //target LI's in a list
    background: #09c; //changes all li's to blue bg when hovering over nav
}

ul.my-nav:hover li:hover { //target LI within nav, more specific selector is key.
    background: #d22; //changes hovered li to red bg

}

This is the basic concept here but you'll have to make sure that your menu does not have any "excess" space because that will trigger the effect before you might hover over an actual item but that said, that is pretty much the only downside.

Answer 3

As the comments say you can't do this using CSS. Good news is it's simple to do with Jquery! Is this what you want? - https://jsfiddle.net/ron7p3s5/

$(document).ready(function(){
    $(".active").hover(function(){
        $('li').css("background-color", "#D4D4D4");
    });
});

Answer 4

There is no need to make this simple thing more complex. Just apply this css it will work

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