当使用jQuery悬停另一个div时，div背景会发生变化 [英] Div background change when hovering another div with 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>点击我！< / div> 
< / div> 
  

我的CSS：

  div＃slide {
 background：url（base_slide.png）no-repeat; 
 width：629px; 
 height：89px; 
 background-position：0px 0px; 
} 
  

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

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

您可以帮我吗？

解决方案

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

选择这个例子： 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/

I am trying to get this working but I know very little of jQuery.

When an user hovers on the div "button" the background position of the div "slide" must change from "0 0" to "0 -89px", while moving the mouse to another point must reset the background position to "0 0".

That's the code (recycled from another question on stackoverflow):

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

My HTML:

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

My CSS:

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

It works, but not as expected. When I hover on the button div nothing happens, but If I move my mouse to another point all the code works and the background changes.

I am sure that there is a possibility to fix this but I just started yesterday to explore some jQuery. Also I don't know how to reset the background position to 0 0.

Could you help me please?

解决方案

I think that the var newValue should be replaced by '0 0'. If I understand your needs correctly.

Check this example: http://jsfiddle.net/VBEaQ/1/

Update: Here is a full example with fadeIn fadeOut effect ;-)

$(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();
    });
});​

Live demo: http://jsfiddle.net/VBEaQ/9/

这篇关于当使用jQuery悬停另一个div时，div背景会发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！