1

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

（アニメーションは実行されておらず、瞬時に切り替えられます。）

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');
});
4

2 に答える 2

1

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

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

これらすべての非JSユーザースタイルと同じ方法でリンクされたスタイルシートがあります。

#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');
});
于 2010-08-17T02:31:16.847 に答える
0

cssがアニメーションをオーバーライドしているため、アニメーションは表示されません。

削除する

menu span:hover ul {display: block;}

jsが有効になっていないブラウザーに対応するためにcssをオーバーライドしようとはしません。数が非常に少ないため、検討する価値はありません。

于 2010-08-17T03:00:08.567 に答える