jQuery添加活动类和消除菜单上的悬停效应

Question

我是jQuery的新手。我有鼠标悬停边框底部和活动类，其中也有相同的边界底部。但是，当我的菜单项处于活动状态时，我不希望鼠标悬停？我如何做到这一点，因为目前我有两个边框底部时，我的菜单项是活动的。

请在下面找到我到目前为止所做的事情。

​

$(".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>

​

Answer 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>

​

Answer 2

将类添加到li中作为hover，当任何li活动删除该hover类时，请在下面找到获取更多信息的片段

​

$(".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>

​