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>

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

1 个答案: