0

メニューとjqueryコードがあり、ホバーすると背景画像が異なります。

       $('#menu a').hover(function() {
            $(this).css( 'background', 'url(images/slider_bg_hover.png) repeat-x' );                     
       },function(){
            $(this).css( 'background', 'url(images/slider_bg.png) repeat-x' );
       });

正常に動作しますが、クリックしたメニューを強調表示したいと思います:

$('#menu a').click(function() {
   $(this).css( 'background', 'url(images/slider_bg_hover.png) repeat-x' );
});

それもうまくいきますが、クリックした後、メニューエリアとホバーアクション呼び出しからマウスポインターを移動します! そのため、メニューのその部分は強調表示されていません!

私に何をアドバイスできますか？

4

2 に答える 2

2

個々の css 属性を設定するのではなく、代わりにクラスを使用することを検討してください。

あなたの例には3つのcssクラスが必要です（そのうち2つは同じ定義です）

.menu{
    background: url(images/slider_bg.png) repeat-x;
}

.hoverMenu, .selectedMenu{
    background: url(images/slider_bg_hover.png) repeat-x;
}


$('#menu a').hover(function() {
        $(this).addClass('menu');                     
   },function(){
        $(this).addClass( 'hoverMenu' );
   });

$('#menu a').click(function() {
   $('#menu a').removeClass( 'selectedMenu' );
   $(this).addClass('selectedMenu');
});

要素に競合する 2 つのクラスがある場合、CSS 定義で最後に来るクラスが有効になると思います。これを確認するのは少し夜遅くですが、クラスを入れ替えて、どの方法が最適かを確認できます..

于 2009-10-04T21:17:26.327 に答える
1

また、selected の css ルールの後に !important を配置することも検討できます。これにより、ホバー ルールが無視されます。（上記のソリューションを使用）。

于 2009-10-04T21:27:40.393 に答える