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

Question

我在 div 上有一个背景图像，当我将鼠标悬停在 div 中的链接上时，我想将其位置从中心底部更改为中心顶部。

我的 jQuery 说得不太好，我有点像法国的美国人，除了 parlez vous 之外了解不多，但这里是。

这是 html:

<div class="video-link">
 <a href="#">Watch the Pack It Videos Now.</a>
</div>

这是 CSS:

.video-link { 
        width: 610px;
        height: 68px;
        background: url(../_images/btn_horz-video.png) no-repeat center bottom;
        margin: 10px 0 10px 50px; 
        }

.video-link a { 
        color: #000; 
        text-decoration: none; 
        border: none;
        font-size: 18px;
        display: block;
        padding: 25px 0 0 90px; font-weight: bold; }                                                    

最后但并非最不重要的一点是，这是 jQuery:

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

这里是the page - 这是页面中间的“立即观看打包视频”图像。

谢谢。

Answer 1

我会把它改成这样:

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

我在您的网站上测试了它，它有效。

编辑:我所做的就是删除 a 并将悬停应用于 div。然后我取出了最接近的方法调用，并对其应用了 css 更改，因为它现在适用于 div。显然，如果其他地方使用这个 css 但我没有看到任何东西，这是行不通的。