Question

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

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

        },
        function() {
            $('ul', this).removeClass("hover");
            $(this).css("background-image","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无关。

尝试使用与/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)");
        }
    );

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

1 个答案: