Remplacement de pseudo-styles dans jQuery

Question

Comment écraser le CSS ci-dessous avec jQuery?

(. Les animations ne sont pas en cours d'exécution et il est juste un interrupteur instantané)

menu span ul {display: none;} 
menu span:hover ul {display: block;} 

$('#menu span').mouseenter(function(){ 
    $('#menu span ul').slideDown('fast'); 
}).mouseleave(function(){ 
    $('#menu span ul').slideUp('fast'); 
}); 

Answer 1

Une astuce pour degredation gracieuse est de ne pas avoir à remplacer les styles, comme ceci:

<noscript> 
    <style type="text/css">#menu span:hover ul {display: block;}</style> 
</noscript> 

Avoir une feuille de style liée de la même manière avec tous ces styles d'utilisateurs non-JS.

---

Ou, faites-le par une classe que vous appliquez à #menu que vous pouvez supprimer si les règles ne correspondent plus, comme ceci:

#menu span ul {display: none;} 
#menu.noJS span:hover ul {display: block;} 

Et dans votre script simplement supprimer cette classe:

$("#menu").removeClass("noJS"); 

---

Comme une note de côté, vous pouvez mincir votre code à l'aide .hover() et .slideToggle() comme ceci:

$('#menu span').hover(function(){ 
    $(this).find('ul').slideToggle('fast'); 
}); 

Answer 2

Vous ne voyez pas l'animation parce que votre css est prépondérant il.

Supprimer

menu span:hover ul {display: block;} 

Je ne la peine d'essayer de passer outre le css pour accueillir les navigateurs qui n'ont pas js activé. Le nombre est si petit qu'il ne vaut pas la peine d'être pris en considération.