jQuery menu déroulant Etat vol stationnaire

Question

Mon problème est le suivant:

J'ai un menu déroulant et je veux que quand je passe la souris dans le menu le changement de couleur du texte et quand je passe la souris le sous-menu l'état de vol stationnaire reste pour les deux. J'utilise ce code:

$("ul li").hover(function() { 

    $(this).stop().animate({ backgroundColor: "white"}, 500); 

}, 
function() { 

    $(this).stop().animate({ backgroundColor: "black"}, 400); 

}); 

} 

pour animer la couleur de fond sur le vol stationnaire dans le menu et le sous-menu.

Je veux changer la couleur du texte sur hover à (différent pour le menu et sous-menu, pas la même animation de couleur). Pour cela, j'utilise ce code: (exemple Sous-menu, par exemple de menu, changer le sélecteur $ (« ul.menu li a »)

$('ul.submenu li a').hover(function() { 

$(this).css({color:'#FFFFFF'}); 

}, 
function() { 

$(this).css({color:'#00FF00'}); 

}); 

Tout cela fonctionne très bien, mais quand je passe la souris le sous-menu le menu revient à l'état de couleur d'origine (parce que le mouseleave est activé dans le menu hover out).

Tout ce que je veux est que quand je passe la souris sous-menu l'état de vol stationnaire dans le menu reste actif aussi bien.

J'ai essayé beaucoup de choses mais tous me donnent des problèmes, seule la chose qui fonctionne est css, mais j'ai besoin de contrôler dinamiquement les couleurs du texte aussi

CSS qui fonctionne:

ul li:hover a { 
    color: #FFF; 
} 

(avec ce code css Je contrôle la couleur du menu avec le css et quand je débattais le sous-menu du menu reste à l'état actif, mais le sous-menu fonctionne avec jquery .hover) .

Quelqu'un peut-il m'aider? Merci!

HTML Menu:

<ul class="menu"> 

     <li><a href="#">text</a></li> 

     <li><a href="#">text</a> 

     <ul class="submenu"> 
      <li><a href="#">text</a></li> 
      <li><a href="#">text</a></li> 
      <li><a href="#">text</a></li> 
     </ul> 

     </li> 

     <li><a href="#">text</a> 

</ul> 

Answer 1

Si vous voulez passez la souris pour définir la couleur actuelle jusqu'à ce que vous faites passer quelques autres li, des cours d'utilisation.

css:

ul.submenu li a { color: #0f0; } 
ul.submenu li a.hovered { color: #fff; } 

js:

$('ul.submenu li a').mouseover(function() { 
    if (!$(this).hasClass('hovered')) { 
     $('ul.submenu li a.hovered').removeClass('hovered'); 
     $(this).setClass('hovered'); 
    } 
}); 

J'espère que je vous ai bien compris. Bonne chance pour votre projet.

[modifier]

Oh hm, vous voulez peut-être donc quand vous allez hors du sous-menu, votre li parent ne doit pas perdre sa couleur, malgré vous mousing dehors. Si c'est le cas, la même idée est applicable, vous voulez juste que le code de mouseover soit sélectionné sur l'élément de menu mouseover (ainsi la souris sur le menu désactive tous les autres menus et définit celui-ci), alors vous devez également l'enlever Couleur de la classe du menu si vous quittez le sous-menu ul. Je ne sais pas à quoi ressemblent vos menus en termes de structure, donc je ne peux pas commenter un CSS qui fonctionne pour ce sélecteur. Oh, enfin, vous voudriez avoir une règle css par rapport au sous-menu hover pour gérer la surbrillance de votre sous-menu.

Désolé pour la réponse décousue ...