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班级时，请在下面的代码段中找到更多信息

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: