使用jQuery悬停另一个div时div背景更改

Question

我正在努力让它工作，但我对 jQuery 知之甚少。

当用户将鼠标悬停在 div“按钮”上时，div“幻灯片”的背景位置必须从“0 0”变为“0 -89px”，而将鼠标移动到另一个点必须将背景位置重置为“ 0 0"。

这是代码（从stackoverflow上的另一个问题回收）：

    $(document).ready(function(){
    $('#button').hover(function(){
        $('#slide').css('backgroundPosition', newValue);
    }, function(){
        $('#slide').css('backgroundPosition', '0 -89px');
    });
});

我的 HTML：

<div id="container">
        <div id="slide"></div>
        <div id="button">Click me!</div>
</div>

我的 CSS：

div#slide {
  background: url(base_slide.png) no-repeat;
  width: 629px;
  height: 89px;
  background-position: 0px 0px;
}

它有效，但不如预期。当我将鼠标悬停在按钮 div 上时，没有任何反应，但是如果我将鼠标移动到另一个点，所有代码都可以正常工作并且背景会发生变化。

我确信有可能解决这个问题，但我昨天才开始探索一些 jQuery。另外我不知道如何将背景位置重置为0 0。

你能帮帮我吗？

Answer 1

我认为 var newValue 应该替换为 '0 0'。如果我正确理解您的需求。

检查这个例子：http://jsfiddle.net/VBEaQ/1/

更新： 这是一个带有淡入淡出效果的完整示例；-)

$(document).ready(function(){
    $('#button').hover(function(){
        $('#slide').stop().fadeOut(function(){
            $(this).css('backgroundPosition', '0 -89px');
        }).fadeIn();
    }, function(){
        $('#slide').stop().fadeOut(function(){
            $(this).css('backgroundPosition', '0 0');
        }).fadeIn();
    });
});​

现场演示： http://jsfiddle.net/VBEaQ/9/

Answer 2

您应该尝试定义多个 css 属性和值，而不是您使用的 1 个函数 = 1 个 css 方法。 jquery 文档应该有所帮助.. 还有它的背景位置而不是 backgroundPosition。