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

Question

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

这是页面：它是右中的两个蓝色播放按钮。

我以前可以使用它，但它坏了，我无法让它正常工作。

这是 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 不支持在

元素上执行此操作。

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

< em>上面示例中的 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 成为 元素而不是

。

Answer 2

一些注意事项：

1. 你的位置颠倒了：“中心顶部”而不是“顶部中心”和“中心底部”而不是“底部中心”参考：http://www.w3schools.com/css/pr_background-position.asp

2. 使用addClass和RemoveClass。不要内嵌设置样式。使用它就像 docs.jquery.com 上的示例一样。

3. 如果您不需要 IE 支持，请使用不带 javascript 的 CSS 声明。

Answer 3

我将为这个解决方案留下一个单独的答案，但我仍然想说 使用 CSS 而不是 javascript。

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

下面的代码示例使用 $(function() { ... }); 包装您的代码，这是 jQuery 的 .ready() 方法，确保在代码运行之前加载文档。

   // 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 的 .closest() 方法，但也没有什么坏处。不妨将其删除。