Question

这里有一点问题。

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

图像位于此“DIV”内。

我在JSFIDDLE中做了一个例子，但没有精灵，只是背景颜色。

试过这个，但没有：

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

Answer 1

您的JSFiddle演示有两个问题：

首先，jQuery不包含在内（您可以将左侧边框中的Frameworks and Extensions下拉列表包含在内）。你的演示正在抛出：

未捕获的ReferenceError：$未定义

其次，您将#box_sm背景颜色从white更改为white，因此即使添加了jQuery，您也不会注意到任何更改。

以下是modified JSFiddle demo，其中包含jQuery，并将#box_sm元素的默认背景颜色设置为blue。当您现在将鼠标悬停在#box元素上时，#box_sm元素的背景将变为白色。

如果您希望在不再悬停时将背景更改回来，则可以完全删除JavaScript并使用CSS :hover：

#box:hover #box_sm {
    background-color: white;
}

JSFiddle demo

Answer 2

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

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

如果您想更改精灵，那么您可以尝试更改其background-position属性：

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

如果您因为忘记在左上方 Framewoks and Extensions 中添加jquery而询问您的小提琴无法正常工作的原因。同时将您的背景更改为其他默认颜色以查看代码是否正常工作。

jQuery悬停功能 - 当鼠标悬停在DIV上时，IMAGE（精灵）应该改变背景

2 个答案:

Your fiddle