css - 如何选择其他(兄弟)元素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;
}