Question

我在导航栏中有一个列表，所有项目（“主页”和“为什么”）都在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上合并）：

评论后编辑：如果您希望初始状态不适用且悬停状态已经是您想要的第二个孩子，那么它应该是这样的（这样也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;
  }

Answer 2

你可以使用：不是选择器 https://www.w3schools.com/cssref/sel_not.asp

#main-nav .nav a:hover:not(.someclass){
   opacity:0.5;
}

＆＃13;

#site-nav .nav a,
#site-nav .nav a:active,
#site-nav .nav a:hover{
  opacity:0.2;
  }

#site-nav .nav .active > a,
#site-nav .nav a:hover:not(.normal){
  opacity:1;
  }

＆＃13;

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

＆＃13;

Answer 3

当您为

声明opacity: 1时

li a:hover

您可以同时声明opacity: 1

li a[href="#about"]

工作示例：

li a {
opacity: 0.5;
transition: opacity 0.2s ease-out; 
}

li a:hover, li a[href="#about"] {
opacity: 1; 
}

<ul>
<li><a href="#home" class="scrollto">Home</a></li>
<li><a href="#about" class="scrollto">Why</a></li>
</ul>

从悬停操作中排除元素

3 个答案: