jQuery悬停函数-当悬停在DIV上时，IMG(精灵)应该改变背景

jQuery Hover Function - When hover over a DIV, an IMG (sprite) should change background

本文关键字：悬停 精灵 背景 改变 IMG 函数 上时 DIV jQuery      更新时间：2023-09-26

这边出了点小问题。

我试图使背景图像改变它的悬停位置(精灵)，当我悬停在一个"DIV"。

图片在DIV中

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

例子JSFiddle

试过了，但是没有:

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

为什么要用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;
}

如果你在问为什么你的小提琴不工作，因为你忘记从左上角的框架和扩展包括jquery。还可以将背景更改为其他默认颜色，以查看代码的工作情况。

你的小提琴

您的JSFiddle演示有两个问题:

首先，jQuery没有包含在内(你可以在左边栏的框架和扩展下拉菜单中包含它)。你的演示抛出了:

Uncaught ReferenceError: $ is not defined

其次，你将#box_sm的背景颜色从white更改为white，所以即使添加了jQuery，你也不会注意到任何变化。

这是一个修改后的JSFiddle演示，我在上面加入了jQuery，并将#box_sm元素的默认背景颜色设置为blue。当你将鼠标悬停在#box元素上时，#box_sm元素的背景将变为白色。

如果你想让背景在不再悬停时变回来，你可以完全放弃JavaScript，只使用CSS的:hover:

#box:hover #box_sm {
    background-color: white;
}
<<p> JSFiddle演示/strong>。
相关文章：