javascript - 从悬停 Action 中排除元素

Question

我在导航栏中有一个列表，所有元素(包括“Home”和“Why”)都受制于 css 中的悬停操作:

#main-nav .nav a,
#main-nav .nav a:active,
#main-nav .nav a:hover {
  opacity:0.5;
  -webkit-transition:opacity 0.2s ease-out;
  transition:opacity 0.2s ease-out; 
}

#main-nav .nav .active > a,
#main-nav .nav a:hover {
  opacity:1;
}

<div id="site-nav" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li>
      <a href="#home" class="scrollto">Home</a>
    </li>
    <li>
      <a href="#about" class="scrollto">Why</a>
    </li>
  </ul>
</div>

悬停操作使文本的不透明度默认为 0.5，当您将鼠标悬停在其上时，它会变为 1 不透明度。

我如何从这个不透明操作中排除 A HREF 元素之一，同时出于样式、位置等原因保留在 html 代码的相同位置？

非常感谢。

Answer 1

一种方法是结合 not() 和 nth-child(在 li 上，不适用于 a):

评论后编辑:如果您希望不应用初始状态并且悬停状态已经是您一直想要的第二个 child ，它应该是这样的(那样也是 hover不适用于第二个链接):

再次编辑以使其成为更现实的情况(:active 和 :hover 仅适用于第二条规则，对第一条规则没有意义):

#main-nav .nav li:not(:nth-child(2)) a {
  opacity:0.5;
  -webkit-transition:opacity 0.2s ease-out;
  transition:opacity 0.2s ease-out; 
  }

#main-nav .nav li:not(:nth-child(2)) a:active,
#main-nav .nav li:not(:nth-child(2)) a:hover{
  opacity:1;
  }