Question

当我将鼠标悬停在该div中的链接上时，我需要能够在包含div中更改背景图像的位置。

这是page：右边是两个蓝色播放按钮。

我以前工作过，但它已经坏了，我无法让它正常工作。

这是html：

<div class="h-video">
<p><a class="play-video" href="#flashArea3">Secondary headline goes here to say something you want. This needs to grab their attention.</a></p>
</div>

这是jQuery：

$(".h-video").hover(function() {
 $(this).closest("div").css({ 'background-position': 'top center' });
    }, function() {
 $(this).closest("div").css({ 'background-position': 'bottom center' });
});

我将不胜感激。

感谢。

Answer 1

为什么要使用javascript？你可以单独使用CSS，虽然IE6不支持<div>元素。

示例： http://jsfiddle.net/yr4yH/1/

上面示例中的CSS：

.h-video {
    width: 461px;
    height: 67px;
    background-image: url("http://www.theideapeople.com/projectpath/ideapeople-new/_images/btn_video-home.png");
    background-position: bottom center;
    background-repeat: no-repeat
}

.h-video:hover {
    background-position: top center;
}

如果您需要支持IE6，我相信您可以重新设计您的布局，因此.h-video是<a>元素而不是<div>。

Answer 2

我将为此解决方案单独给出答案，但我仍然会对use CSS instead of javascript说。

在加载元素之前，为.hover()分配处理程序的代码正在运行。否则你的代码是正确的。

下面的代码示例用$(function() { ... });包装代码，// Wrap your code like this so it doesn't run until the DOM is ready $(function() { $(".h-video").hover(function() { $(this).closest("div").css({ 'background-position': 'top center' }); }, function() { $(this).closest("div").css({ 'background-position': 'bottom center' }); }); });是jQuery's .ready() method的快捷方式，可确保在代码运行之前加载文档。

{{1}}

此外，此处不需要jQuery's .closest() method，但也不会受到伤害。不妨将它删除。

Answer 3

几个笔记：

您的位置已被颠倒：“中心顶部”不是“顶部中心”，“中心底部”不是“底部中心”参考：http://www.w3schools.com/css/pr_background-position.asp
使用addClass和RemoveClass。不要在线设置样式。像docs.jquery.com上的示例一样使用它。
如果您不需要IE支持，请使用带有javascript的CSS声明。

当我将鼠标悬停在链接上时，如何使用jQuery更改div背景？

3 个答案: