在悬停时，更改其他链接的不透明度

Question

我想做的简单效果

将鼠标悬停在导航链接上，会使悬停的链接变为白色，而其他链接则会降低不透明度。

虽然听起来很简单，但我有点困难。

.nav-link:hover
{
color:rgba(255,255,255,1) !important;
}
.nav-link:hover .nav-link
{
color:rgba(255,255,255,.75) !important;
}

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Publisher</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Advertiser</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>

这可能非常简单，但我就是无法理解

Answer 1

由于CSS不支持以前的同级或父级选择器，如果您只想用CSS的方式，只有一种方法可以让它工作：

1. 当整个.navbar-nav元素悬停在上面时，所有.nav-item都将淡出，例如opacity: 0.25
2. 当任何单个.nav-item悬停时，它将逐渐变为opacity: 1

然而，该方法的一个优点是，它依赖于布局，只有当链接以某种方式收缩包装时，它才能发挥最佳效果，从而使<ul>中没有未由其子级填充的空白：

.nav-item {
transition: opacity .25s ease-in-out;
}
.navbar-nav:hover .nav-item {
opacity: 0.25;
}
.navbar-nav:hover .nav-item:hover {
opacity: 1;
}

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Publisher</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Advertiser</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>