Javascript 当鼠标悬停在DIV上时，IMG（精灵）应该改变背景

这里有点小问题

当我在“DIV”上悬停时，我试图将背景图像更改为其悬停位置（精灵）

图像在这个“DIV”中

我在JSFIDLE中做了一个例子，但是没有sprite，只有背景色

尝试过这个，但什么都没有：

$( "#box" ).hover(function(){
    $( "#box_sm" ).css("background","black");
});

---

您的JSFIDLE演示有两个问题：

首先，jQuery不包括在内（您可以将其包括在左侧边栏的框架和扩展下拉列表中）。您的演示正在抛出：

未捕获引用错误：$未定义

其次，您正在将

#box_sm

背景颜色从

白色

更改为

白色

，因此即使添加了jQuery，您也不会注意到任何更改

这是一个我已经加入jQuery的元素，并将

#box_sm

元素的默认背景颜色设置为

蓝色。现在将鼠标悬停在
#box
元素上时，
#box\u sm
元素的背景将变为白色


如果您想在不再悬停时将背景更改回来，可以完全删除JavaScript，只需使用CSS的
：hover
：

#box:hover#box\u sm{
背景色：白色；
}

.
为什么您需要js，您只能在css中执行此操作：

#box:hover > #box_sm{
   background: white;
}


当您想要更改精灵时，您可以尝试更改其
背景位置
属性，如下所示：

#box_sm{
   background: url('yoururlofsprite') 0px 0px no-repeat;
}
#box:hover > #box_sm{
   background: url('yoururlofsprite') 20px 20px no-repeat;
}


如果你问为什么你的提琴不工作，因为你忘了在左上角框架和扩展中包含jquery。还可以将背景颜色更改为其他默认颜色，以查看代码是否正常工作

内部div的背景已经设置为白色，所以再次这样做不会改变任何事情。同样，对于像这样简单的事情，只使用CSS是最容易的：首先：在你的小提琴中，你没有加载jQuery，所以它不能工作。第二，你把背景颜色从白色改为白色，所以你看不到变化是正常的，这可能是一个更合适的小提琴：Ups，我的坏。设置为黑色。在OP的代码中，背景设置为黑色，但在悬停结束时，背景不会更改回黑色。有了CSS，背景会在不再悬停的时候变回来。这就是我要找的，我会查出来的