jQuery - IF puis Supprimer une classe sur .hover

Question

J'ai la fonction jQuery suivante:

$(function(){ 
      if ($(".menu li").hasClass("active")) { 
        $(".active").css("margin-top", "6px"); 
       } 
     }); 

Ceci est appliqué à un menu CSS/jQuery, qui dilate et se contracte lorsque chaque élément de menu est plané au-dessus. L'événement onClick ajoute un margin-top of 6px pour donner les impressions d'un bouton enfoncé.

J'utilise ensuite PHP pour détecter la page visitée par l'utilisateur pour ajouter une classe .active à l'élément de menu correspondant.

La question, la classe .active doit rester en place jusqu'à l'utilisateur passe au-dessus d'un élément de menu différent. À quel point la classe .active doit être supprimée de cet élément - Comme la classe .active est réutilisée sur les événements .hover.

Voici le balisage HTML de base:

<ul id="menu"> 
<li> 
<div class="inner"> 
<div class="button"><img src="images/insightbutton.png" /></div> 
<div class="description">&nbsp;</div> 
</div> 
</li> 
<li> 
<div class="inner"> 
<div class="button"><img src="images/insightbutton.png" /></div> 
<div class="description">&nbsp;</div> 
</div> 
</li> 
</ul> 

Comment puis-je garder la classe .active appliquée à l'élément de menu actif, mais l'enlever quand .inner est plané au-dessus?

Answer 1

Vous pouvez le faire:

$(".menu li.active").addclass("onPage"); 
$(".menu li").hover(function() { 
    $(".menu li.active").removeClass("active"); 
    $(this).addClass("active"); 
}, function() { 
    $(this).removeClass("active"); 
    $(".menu li.onPage").addClass("active"); 
}); 

Ce code effectue les opérations suivantes:

• Affecte une classe d'espace réservé à l'original active (assig ned par votre PHP).
• En survol, supprime la classe active de tous les frères et sœurs <li> et définit le vol plané sur 1 à active.
• En quittant stationnaire, il supprime active de lui-même et sélectionne l'espace réservé et restaure actif à l'original (la page sur laquelle ils se trouvent).

Answer 2

Vous pouvez simplement sélectionner le div qui a la classe active et supprimer la classe:

$('div.inner').hover(function() { 
    $('div.active').removeClass('active'); 
});