jQuery adding active class and removing hover effect on menu

Question

am new to jQuery. I have mouse hover border bottom and active class which also have same border bottom. However I don't want mouse hover when my menu item is active? How can I do that because currently I have two border bottom when my menu item is active.

Please find below snippet what i have done so far.

$(".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` That's not the case. There's no issue with your CSS at all. — Rory McCrossan, Apr 26 '17 at 07:11

score 1 · Accepted Answer · answered Apr 26 '17 at 07:12

Use .main-nav li:not(.active) a:hover in your CSS:

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

score 0 · Answer 2 · answered Apr 26 '17 at 07:13

Add a class to li as hover and when any li active remove that hover class please find below snippet for more info

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

jQuery adding active class and removing hover effect on menu

2 Answers2