0

私はjQueryを初めて使用するので、これは多くの人にとって些細なことだと思います。メインメニューにカーソルを合わせるとサブメニューが表示されるナビゲーションバーを作成しています。メインメニューの背景画像を変更し、同時にサブメニューを表示したい。これが私のコードです：

$('#nav-list li.products').hover(
        関数（） {
            $('#nav-list li.products ul').addClass("hover");
            $(this).css("background-image","url(img/products-hover.png)");

        }、
        関数（） {
            $('ul', this).removeClass("hover");
            $(this).css("背景画像","url(img/products.png)");
        }
    );

このコードはサブメニューのみを表示し、メイン メニューのスタイルを更新しません。jQueryでこれを達成するにはどうすればよいですか? ありがとう！

4

1 に答える 1

0 
$(this).css("background-image","url(img/products-hover.png)");

上記のコードはbackground-image: url(img/products-hover.png、現在の Web ページの DOM に追加されます。
したがって、画像img/products-hover.pngはcssファイルに関連している可能性がありますが、現在のURLに関連していない可能性があります。

のようなルート パスに相対する URL を試してみる/img/products-hover.pngか、このシナリオでは絶対パスを使用することをお勧めします。http://www.example.com/img/products-hover.png

例

$('#nav-list li.products').hover(
        function() { 
            $('#nav-list li.products ul').addClass("hover");
            $(this).css("background-image","url(http://www.example.com/img/products-hover.png)"); 

        },
        function() {
            $('ul', this).removeClass("hover");
            $(this).css("background-image","url(http://www.example.com/img/products.png)");
        }
    );
于 2011-03-04T11:22:24.450 に答える