html - 如何使导航栏元素变暗，但悬停列表项除外

Question

所以，我想实现像here这样的导航效果.我希望整个 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>

我希望结果与链接中的一样，但结果并没有使悬停的 li“变暗”。

我找到了解决方案，这是编辑后的 ​​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>