jQuery .addClass ne change pas css

Question

Idéalement, je veux passer au-dessus de mon <li> dans mon menu et mettre en surbrillance chaque <li> mais comme un test, j'ai ce qui suit pour changer la classe sur le vol stationnaire. Des pensées pour lesquelles cela ne marchera pas?

Merci beaucoup.

.dropdownhoverIn a:hover 
{ 
    background-color: White; 
    color: #39C; 
} 

---

<form id="form1" runat="server"> 
     <div id="multiDropMenu"> 
      <ul id="menu"> 
       <li><a href="#" id="places">Places</a> 
        <ul id="dropdown1"> 
         <li><a href="http://google.com">To Go</a></li> 
         <li><a href="#">To See</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Transportation</a></li> 
      </ul> 
     </div> 
    </form> 

---

$(document).ready(function() { 
    $("#menu li").hover(function() { 
     $(this).find("ul").find("a").hover(function() { 
      $(this).addClass("dropdownhoverIn"); 
     }); 
     $(this).find("ul").slideToggle(250); 
    }); 
}); 

Answer 1

Débarrassez-vous de l'affectation .hover() "intérieure",

$("#menu > li").hover(function() { 
    $(this).find("ul a").addClass("dropdownhoverIn"); 
    $(this).find("ul").slideToggle(250); 
});​ 

et le sélecteur :hover pseudo de votre classe.

.dropdownhoverIn { 
    background-color: White; 
    color: #39C; 
}​ 

Essayez-:http://jsfiddle.net/GKZRU/

Lorsque vous appelez .hover() un paramètre de fonction, vous assigner un gestionnaire. Il n'y a aucune raison de le faire sur chaque vol stationnaire sur le <ul>.

Et si vous utilisez .hover() de jQuery, vous n'en avez pas vraiment besoin dans le CSS. Si vous le souhaitez pour la compatibilité, vous avez besoin d'un sélecteur CSS séparé.

J'ai également ajouté > au sélecteur pour le .hover() puisque je suppose que vous voulez l'activer seulement sur l'enfant de #menu.