jQueryアクティブクラスを追加し、メニューでホバー効果を削除します。

Question

jQueryの新機能です。私は、マウスのホバーボーダーボトムと、同じボーダーボトムを持つアクティブクラスを持っています。しかし、私はメニュー項目がアクティブなときにマウスのホバーを望んでいないのですか？現在、メニュー項目がアクティブなときに境界線が2つあるため、どうすればいいですか。

私がこれまで行ってきたことを以下のスニペットで見つけてください。

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

hoverとしてliにクラスを追加したときに任意のliアクティブ削除それはそうではないのですactive`私のメニュー項目があるとき、3210がクラスの詳細情報

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