I am still new on jquery and this is the problem that I am currently facing. What I'm trying to do is to put hover and click event on the menu of a webpage, hover event works perfectly but click event is not working. Where should I fix? also, is it possible to combine the hover and click event to make the code shorter? Thank you in advance for the help.
Here is my code:
$(document).ready(function() {
$(".navi li a:first").addClass("active");
$(".navi li a").hover(function() {
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
$(".navi li a").click(function() {
$(".navi li a").removeClass("active");
$(this).addClass("active");
});
}); //end
.navi>li a.active {
color: #0a2a43;
background-color: rgba(255, 255, 255, 0.8);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul class="navi">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--navi-->
</nav>
:hover
psuedo in CSS?hoverIn
thenclick
and finallyhoverOut
which is removing theactive
class of all your menu items.hover
.