jQueryの無擬似スタイル

Question

以下のjqueryで以下のCSSを上書きするにはどうすればよいですか？

（アニメーションは実行されておらず、瞬時のスイッチです。）

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

優雅な脱毛のための1つのトリックは、このようなスタイルをオーバーライドする必要がないことです。

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

これらのすべてのfor-js-userスタイルと同じ方法でリンクされたスタイルシートを持っています。

---

または、あなたが申請するクラスを介してそれを行います #menu このように、ルールが一致しなくなるように削除できることを次のようにしてください。

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

スクリプトでは、そのクラスを削除するだけです。

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

---

サイドノートとして、あなたはあなたのコードを使用してスリムにすることができます .hover() と .slideToggle() このような：

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

Answer 2

あなたのCSSがそれを無効にしているので、あなたはアニメーションを見ていません。

削除する

menu span:hover ul {display: block;}

JSを有効にしていないブラウザに対応するために、CSSをオーバーライドしようとはしません。数は非常に小さいため、考慮する価値はありません。