I have a navbar that looks something like this
<ul class="nav navbar-nav"> <li class="nav-item"><a href="#services">Services</a></li> <li class="nav-item"><a href="#work">Work</a></li> <li class="nav-item"><a href="#contact">Contact</a></li> </ul> when I :hover one item I want to change the styling of the other two. What CSS selector can I use?
You could apply the hover on the parent element and exclude the hovered child:
.navbar-nav:hover li:not(:hover) { background: red; } You can use the :not selector to apply style on the NOT hovered elements without having to style them when they're not hovered:
.nav.navbar-nav li a:not(:hover) { color: red; } You can apply the hover to the nav wrapper and style all the li children. Then, apply a hover to the li and style it to be different: JS Fiddle
ul.nav:hover li.nav-item { background: green; } li.nav-item:hover { background: transparent; } I'm not sure if there is a way to do this purely with css. However, you could do this easily with jquery.
$(function(){ $('.navbar-nav nav-item:hover').siblings().css('background-color', 'red'); }); You can try something like this:
ul:hover li { background: red; } ul li:hover { background: none; } simple DEMO
also described in Hover on “Everything But”
