悬停时的jQuery多重效果（导航栏）

Question

我是 jQuery 新手，所以我认为这对很多人来说都是微不足道的。我正在制作一个带有子菜单的导航栏，这些子菜单在主菜单悬停时出现。我想更改主菜单的背景图像，同时显示子菜单。这是我的代码：

$('#nav-list li.products').hover( 功能（） { $('#nav-list li.products ul').addClass("hover"); $(this).css("背景图片","url(img/products-hover.png)"); }, 功能（） { $('ul', this).removeClass("hover"); $(this).css("背景图片","url(img/products.png)"); } );

此代码仅显示子菜单，但不更新主菜单的样式。我怎样才能在 jQuery 中实现这一点？谢谢！

Answer 1

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

上面的代码会将background-image: url(img/products-hover.png添加到当前网页的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)");
        }
    );