Question

我试图让这个工作，但我对jQuery知之甚少。

当用户在div“按钮”上盘旋时，div“slide”的背景位置必须从“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;
}

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

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

你能帮我吗？

Answer 1

我认为var newValue应该替换为＆＃39; 0 0＆＃39;。如果我理解你的需要。

选中此示例：http://jsfiddle.net/VBEaQ/1/

更新：这是fadeIn fadeOut效果的完整示例; - ）

$(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个function = 1 css方法。 jquery文档应该有用..还有它的background-position而不是backgroundPosition。

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

2 个答案: