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

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> .