Sostituzione di stili pseudo a jQuery

Question

Come faccio a sovrascrivere il CSS di seguito con jQuery?

(Le animazioni non sono in esecuzione ed è solo un interruttore istantaneo.)

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

Un trucco per degrado grazioso è quello di non avere per sovrascrivere gli stili, in questo modo:

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

di avere un foglio di stile collegato allo stesso modo con tutti questi stili per-non-JS-utente.

---

In alternativa, farlo attraverso una classe si applica a #menu che è possibile rimuovere in modo che le regole non è più partita, in questo modo:

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

E nello script basta rimuovere quella classe:

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

---

Come nota a margine, si può dimagrire il codice utilizzando .hover() e .slideToggle() in questo modo:

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

Answer 2

Non riesci a vedere l'animazione perché il CSS è prevalente esso.

Rimuovi

menu span:hover ul {display: block;}

Non vorrei preoccuparsi di cercare di ignorare il css per ospitare i browser che non hanno js abilitati. Il numero è così piccolo che non vale la pena considerazione.