1

我试图让这个工作，但我对 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。

请问你能帮帮我吗？

4

2 回答 2

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/

于 2012-04-15T12:19:12.237 回答
-1

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

于 2012-04-15T12:37:26.770 回答