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
– Rory McCrossan, Commented Apr 26, 2017 at 7:11

Arkej · Accepted Answer · 2017-04-26 07:12:32Z

1

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>

answered Apr 26, 2017 at 7:12

Arkej

2,2611 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Curiousdev · Accepted Answer · 2017-04-26 07:13:04Z

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>

Collectives™ on Stack Overflow

jQuery adding active class and removing hover effect on menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related