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

您可以将悬停应用于导航包装并设置所有UnicodeDecodeError个孩子的样式。然后，将悬停应用于li并将其设置为不同的样式：JS Fiddle

li

Answer 3

您可以使用:not选择器在NOT hovered元素上应用样式，而不必在它们没有悬停时设置样式：

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

Answer 4

您可以尝试这样的事情：

ul:hover li {
    background: red;
}

ul li:hover {
    background: none;
}

简单DEMO

也在Hover on “Everything But”

中描述

Answer 5

我不确定是否有办法纯粹使用css。但是，您可以使用jquery轻松完成此操作。

$(function(){
    $('.navbar-nav nav-item:hover').siblings().css('background-color', 'red');
});

如何选择其他（兄弟）元素CSS？

5 个答案: