CODEWITHSUNDEEP
javascriptjqueryhtml
user1071634
user1071634

Reputation: 21

How to remove the added class from other parent li?

<ul id="nav">
   <li id="SubnavGrpTwo" class="navitem">
      <a class="panel"><span class="vcufon btnLabel">Main menu</span></a>
      <ul>
         <li id="itemOne">
            <a class="panel vcufon subMenu"><span>Submenu One</span></a>
         </li>
      </ul>
   </li>
   <li id="SubnavGrpThree" class="navitem">
       <a class="panel"><span class="vcufon btnLabel">Main menu</span></a>         
   </li>
</ul>

Summary: I have dropdown menu that is adding a background image on hovering submenu list item. E.g

I am currently using following jquery code. 

$(document).ready(function () {

$("#nav li ul li a").hover(function () { // on hover submenu list item                          
    $('#nav li').addClass('setHover') //Add class on main menu list item 
},(function(){
         $("#nav li").removeClass('setHover').fadeIn(1000); //Remove class from main menu list item 
   }));
});

Problem: I need to remove this (setHover) class on other main menu list item

  • except the one that's currently on hover state.

    Cheers!

    Upvotes: 1

    Views: 153

    • Answers (5)

    Jaibuu
    Jaibuu

    Reputation: 578

    This would do what you intend

    $(document).ready(function () {
    $("#nav li ul li a").mouseover(function () { // on hover submenu list item     
        $("#nav li").removeClass('setHover').fadeIn(1000); //Remove class from main menu list item
        $(this).parents("#nav li").addClass('setHover') //Add class on the main menu list item you want only
    });
});

    Apparently you don't want a hover function, you only want the first part, "mouseover", not "mouseleave". I used to this kind of thing only to offer support to IE6, but nowadays you should be using CSS only.

    Upvotes: 0

    Adam Rackis
    Adam Rackis

    Reputation: 83358

    I think you want this:

    $("#nav li").not(this.parent()).removeClass('setHover').fadeIn(1000);

    Upvotes: 1

    totallyNotLizards
    totallyNotLizards

    Reputation: 8549

    How about just doing it like this:

    #nav li a {
  /*styles...*/
}
#nav li a:hover
{
    background: url(http://placekitten.com/g/200/200) no-repeat center center;
}

    Apologies if I've misunderestimated but this seems like jQuery overkill for something you can acheive with some CSS.

    Fiddle: http://jsfiddle.net/pKmzw/1/

    Upvotes: 0

    sirmdawg
    sirmdawg

    Reputation: 2579

    Well, I may not understand your question but here is what I'd try to use:

    $("#nav li ul li").hover(function() { // on hover submenu list item   
    $(this).addClass('setHover');
}, (function() {
    $("#nav li ul li").removeClass('setHover');
}));

    You were using $('#nav li') to set the class, but that will add a class to ALL the #nav li's.

    Check out this jsFiddle live example: http://jsfiddle.net/PnSTH/

    Upvotes: 0

    Gabriele Petrioli
    Gabriele Petrioli

    Reputation: 195982

    The following should do it..

    $(document).ready(function () {
    $("#nav li ul li a").hover(function () { // on hover submenu list item
        $(this).closest('#nav > li').addClass('setHover').siblings().removeClass('setHover'); //Add class on main menu list item 
    },(function(){
        $(this).closest("#nav > li").removeClass('setHover').fadeIn(1000); //Remove class from main menu list item 
    }));
});

    Demo at http://jsfiddle.net/gaby/A4kB3/

    Upvotes: 0

    Related Questions