CODEWITHSUNDEEP
javascriptjqueryhtmlhover
Žilvinas
Žilvinas

Reputation: 150

Hover and click on li element change class

I'm trying to create side navigation and I have no experience with jQuery.

What I want to do is that when hovered on any other li element than the active one the one hovered gains .active class and the initial has that class removed but when mouse leaves that element without clicking it the .active class goes again to first li element unless it is clicked. I hope you get the idea.

I tried to do with .hover the hovering thing but I don't know how to revert to initial html when mouseleaves and also how to implement .click function at the same time.

$("#nav li").hover(function() {
    $("#nav li").removeClass("active");
    $(this).addClass("active");                   
    return false;
}, 
function () {
     $(this).removeClass("active");
});       

and here is my HTML:

<nav id="nav">
<ul>
    <li class="active"><a href="#slide1" title="Next Section" >About</a></li>
    <li><a href="#slide2" >Works</a></li>
    <li><a href="#slide3" >Contact</a></li>
</ul>
</nav>

Upvotes: 0

Views: 2709

Answers (4)

Chris Cook
Chris Cook

Reputation: 514

Here is a working JSFiddle. I needed to split the events into hover, click and mouseleave because what you want to do on each is different. I'm also using the variable sticky so it can remember which one was the active element.

https://jsfiddle.net/yvLuLwon/3

If I have misunderstood your question please comment and I will fix it up.

Upvotes: 1

Vignesh Chinnaiyan
Vignesh Chinnaiyan

Reputation: 411

Your code is almost got it, You can view the below code snippet for the full working result.

$("#nav li").hover(function() 
 {
   $("#nav li").removeClass("active");
   $(this).addClass("active");                   
   return false;
 }, 
 function () 
 {
   $("#nav li").removeClass("active");
   $("#nav li:first").addClass("active");
 }
);  
.active
{
   background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
<ul>
    <li class="active"><a href="#slide1" title="Next Section" >About</a></li>
    <li><a href="#slide2" >Works</a></li>
    <li><a href="#slide3" >Contact</a></li>
</ul>
</nav>

Upvotes: 1

user1861582
user1861582

Reputation: 119

You almost got it. You don't need the "return false;" in the first hover function. That will probably interfere with the execution. That is only needed on click events because you are interrupting the default link behavior which reloads the page.

You also need to add the active class to the first list item again on the second function.

$("#nav li").hover(
   function() {
       $("#nav li").removeClass("active");
       $(this).addClass("active");                   
    }, 
   function () {
      $(this).removeClass("active");
      $("#nav li").first().addClass("active");  
   }
);

Upvotes: 1

barmitage
barmitage

Reputation: 122

Consider additional jquery mouse events: .mouseover() .mouseenter() .mouseleave() ... and more: https://api.jquery.com/category/events/mouse-events/

Upvotes: 0

Related Questions