Aufschalten Pseudo-Stile in jQuery

Question

Wie kann ich die CSS überschreiben unten mit jQuery?

(Die Animationen sind nicht laufen zu sein und es ist nur ein momentaner Schalter.)

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

Ein Trick für anmutige degredation ist müssen, um nicht die Stile außer Kraft setzen, wie folgt aus:

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

hat ein verknüpftes Stylesheet auf die gleiche Weise mit all diesen für-nicht-JS-Benutzer Stile.

---

Oder tun es über eine Klasse, die Sie #menu gelten, dass Sie so die Regeln nicht mehr Spiel entfernen, wie folgt aus:

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

Und in Ihrem Skript entfernen Sie einfach die Klasse:

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

---

Als Seite beachten, können Sie abspecken Ihren Code mit .hover() und .slideToggle() wie folgt aus:

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

Answer 2

Sie sind nicht die Animation zu sehen, weil Ihr CSS ist überschrieben.

Entfernen

menu span:hover ul {display: block;}

würde ich nicht die Mühe versucht, die CSS außer Kraft zu setzen Browser aufzunehmen, die js nicht aktiviert. Die Zahl ist so klein, dass es nicht eine Überlegung wert ist.