如何选择其他(兄弟)元素CSS？

Question

我有个肚脐，看起来像这样

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

当我:hover一项时，我想更改另两项的样式。我可以使用什么CSS选择器？

Answer 1

可以在父元素上应用悬停，并排除悬浮子元素：

.navbar-nav:hover li:not(:hover) {    
    background: red;
}

Answer 2

您可以将悬停应用于nav包装器，并对所有li子节点进行样式设置。然后，将鼠标悬停到li并将其样式设置为不同：JS Fiddle

ul.nav:hover li.nav-item {
    background: green;
}
li.nav-item:hover {
    background: transparent;
}

Answer 3

您可以使用:not选择器对未悬停的元素应用样式，而不必在它们没有悬停时对它们进行样式设置：

.nav.navbar-nav li a:not(:hover) {
    color: red;
}