如何使导航栏元素变暗，除了悬停的列表项目

Question

所以，我想在这里实现导航效果。我希望整个nav都变暗，除了悬停的li。

我尝试了以下代码

.nav-bar ul {
  position: relative;
  width: 70%;
  padding-left: 2em;
  margin: 0 auto;
  list-style: none;
  transition-duration: 0.2s;
}
.nav-bar ul:hover {
  z-index: 1;
  opacity: 0.7;
  transition-duration: 0.2s;
}
.nav-bar ul li {
  position: relative;
  display: inline-block;
  padding: 2em;
}
.nav-bar ul li:hover {
  z-index: 2;
  opacity: 1;
}
.nav-bar ul li a {
  text-decoration: none;
  color: #fff;
}

<nav class="nav-bar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">More</a></li>
  </ul>
</nav>

我希望结果与链接一样

我发现了解决方案，这是编辑的CSS代码：

.nav-bar ul {
  position: relative;
  width: 70%;
  padding-left: 2em;
  margin: 0 auto;
  list-style: none;
  transition-duration: 0.2s;
}
.nav-bar ul:hover li:not(:hover) {
  opacity: 0.7;
  transition-duration: 0.2s;
}
.nav-bar ul li {
  position: relative;
  transition-duration: 0.2s;
  display: inline-block;
  padding: 2em;
}
.nav-bar ul li a {
  text-decoration: none;
  color: #fff;
}

Answer 1

您必须使用JavaScript或jQuery来实现这一目标。请参阅下面的示例，以了解如何添加对悬停的影响。

$("li").hover(function() {
  $(this).siblings().children('a').css('opacity', 0.7).css('transition-duration', '0.2s').css('color', 'black'); // add css props here for unhover effect
  $(this).children('a').css('z-index', 1).css('opacity', 0.7).css('transition-duration', '0.2s').css('color', 'red'); // add css props here to add hover effect
}, function() {
  // revert all changes here when hover out
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav-bar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">More</a></li>
  </ul>
</nav>