jQuery添加活动类并删除菜单上的悬停效果答案

【问题标题】：jQuery adding active class and removing hover effect on menujQuery添加活动类并删除菜单上的悬停效果
【发布时间】：2017-04-26 07:07:39
【问题描述】：

我是 jQuery 新手。我有鼠标悬停边框底部和活动类，它们也具有相同的边框底部。但是，当我的菜单项处于活动状态时，我不想鼠标悬停？我该怎么做，因为目前我的菜单项处于活动状态时有两个边框底部。

请在下面找到我到目前为止所做的 sn-p。

$(".main-nav li a").click(function() {
  $(this).parent().addClass('active').siblings().removeClass('active');
});

.main-nav li a:hover { 
border-bottom: 2px solid #1ABC9C;
}
.active {border-bottom: 2px solid #1ABC9C;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
   <li><a href="#">Food delivery</a></li>
   <li><a href="#">How it works</a></li>
   <li><a href="#">Our cities</a></li>
   <li><a href="#">Sign up</a></li>
</ul>

【问题讨论】：

currently I have two border bottom when my menu item is active 并非如此。你的 CSS 完全没有问题。

标签： jquery css hover

【解决方案1】：

在您的 CSS 中使用 .main-nav li:not(.active) a:hover：

$(".main-nav li a").click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
    });

.main-nav li:not(.active) a:hover { 
    border-bottom: 2px solid #1ABC9C;
 }
.active {border-bottom: 2px solid #1ABC9C;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      <ul class="main-nav">
           <li><a href="#">Food delivery</a></li>
           <li><a href="#">How it works</a></li>
           <li><a href="#">Our cities</a></li>
           <li><a href="#">Sign up</a></li>
       </ul>

【讨论】：

【解决方案2】：

将一个类添加到li 为hover，当任何li 活动删除该hover 类时，请在下面的sn-p 中找到更多信息

$(".main-nav li a").click(function() {
    $(this).parent().addClass('active').removeClass('hover').siblings().removeClass('active');
    
    });

.main-nav .hover a:hover { 
    border-bottom: 2px solid #1ABC9C;
       }
    .active {border-bottom: 2px solid #1ABC9C;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
           <li class="hover"><a href="#">Food delivery</a></li>
           <li class="hover"><a href="#">How it works</a></li>
           <li class="hover"><a href="#">Our cities</a></li>
           <li class="hover"><a href="#">Sign up</a></li>
       </ul>

【讨论】：