悬停时，更改其他链接的不透明度 [重复]答案

【问题标题】：On Hover, Change Opacity of Other Links [duplicate]悬停时，更改其他链接的不透明度 [重复]
【发布时间】：2020-04-02 16:40:45
【问题描述】：

我正在做

的简单效果

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

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

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

这可能非常简单，但我就是想不通。

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

由于 CSS 不支持以前的同级或父级选择器，如果您想以纯 CSS 的方式进行操作，只有一种方法可以使其工作：

当整个.navbar-nav 元素悬停在上面时，所有.nav-item 都会淡出，例如opacity: 0.25
当任何个人.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>

【讨论】：