Question

一位jQuery新手在这里试图让某些东西起作用。基本上，我有一个类.nav的div，里面的div是一个导航列表。当我将鼠标悬停在导航列表中的某个项目上时，我想更改background-image .nav。这是我不成功的努力：

$(function(){
    $("li#hover-first").mouseover(function(){
        $("div.nav").removeClass("nav").addClass("navbg");
            .mouseout(function(){$("div.nav").removeClass("navbg").addClass("nav");
    });

这个想法是，一旦第一个li项目悬停在div .nav上，就删除了它的类，并添加了.navbg（具有备用背景图像）。显然这不起作用，所以任何帮助都将非常感谢...谢谢。

Answer 1

尝试：

$("div.nav").css("background", "backgroundImage.jpg");

将“backgroundImage.jpg”替换为您想要设置背景css值的任何内容，就像在css样式表中定义的那样。

Answer 2

你应该使用jQuery的hover method：

$("li#hover-first").hover(
    function() { $("div.nav").removeClass("nav").addClass("navbg"); },
    function() { $("div.nav").removeClass("navbg").addClass("nav"); }
);

Answer 3

您可以使用.hover()和.toggleClass()方法制作您想要的内容，如下所示：

$("li#hover-first").hover(function() {
  $("div.nav, div.navbg").toggleClass("nav navbg");
});

主要的变化是你需要div.navbg选择器，因为当你徘徊时它当前是<div class="navbg">，所以div.nav不再匹配它。具有空格分隔的.toggleClass()只是切换两个类，在这种情况下有效地交换它们。

Answer 4

SLaks和Nick都指出你可以使用悬停方法而不是鼠标悬停和鼠标移动。但是，这更方便，不应该有很大的不同。 JQuery的文档甚至说......

调用$（selector）.hover（handlerIn， handlerOut）是以下的简写： $（选择器）.mouseenter（handlerIn）.mouseleave（handlerOut）;

toggleClass方法也是类似的便利。

我发现现有代码存在两个实际问题。第一个由尼克指出并纠正，这是他修改过的选择器。

主要的变化是你需要的 div.navbg选择器也是因为当你徘徊时它会目前是＆lt; div class =“navbg”＆gt;，所以 div.nav不再匹配它。

我看到的第二个问题是你没有结束你的功能。尼克或者SLaks没有提到这一点，但因为答案的写法不同而得到解决。

如果出于某种原因您不想使用hover和toggleClass，则更正的代码将如下所示：

$(function(){    
    $("li#hover-first").mouseover(function(){
        $("div.nav").removeClass("nav").addClass("navbg");
    }).mouseout(function(){
        $("div.navbg").removeClass("navbg").addClass("nav");
    });
});

使用jquery的背景图像切换

4 个答案: