Question

我感觉这是由我的函数设置引起的，但每次鼠标移动到元素上时，都会多次调用hover事件（我只想在鼠标移动时调用事件）在元素上方盘旋，当鼠标离开元素时（因此不再在元素上方）。

以下是代码：

$(document).ready(function(){

$('#about-us-facebook-default').hover(
     function(){
     $(this).css({'display':'none'});
     $('#about-us-facebook-hover').css({'display':'block'});
},
function(){
     $(this).stop(true,true).css({'display':'block'});
     $('#about-us-facebook-hover').css({'display':'none'});

}
);

});

布局：

<div class="about-contact-button">
<a href="http://www.facebook.com/BlackTiePhotographers" id="about-us-facebook-hover" >
<img src="http://blacktiephotographers.com/wp-content/uploads/2012/03/facebook-hover.png" alt="" title="Connect with us on Facebook" width="30" height="30" class="alignnone size-full wp-image-2267" /></a>
<a href="http://www.facebook.com/BlackTiePhotographers" id="about-us-facebook-default">
<img src="http://blacktiephotographers.com/wp-content/uploads/2012/03/facebook.png" alt="Join Black Tie Photographers on Facebook" title="Connect with us on Facebook" width="30" height="30" class="alignnone size-full wp-image-2266" /></a>
<a href="http://www.facebook.com/BlackTiePhotographers">Join on Facebook</a>
</div>

Answer 1

您正在隐藏鼠标输入方法中的元素，这会导致鼠标再次离开元素，从而导致元素再次显示。这会重复，导致您观察到的行为。

您可能希望将处理程序附加到外部div并处理其中的可见性。

Answer 2

试试这个：

$(document).ready(function(){
    $('#about-us-facebook-default').mouseover(function(){
         $(this).css({'display':'none'});
         $('#about-us-facebook-hover').css({'display':'inline-block'});          
    });
    $('#about-us-facebook-hover').mouseout(function(){
        $('#about-us-facebook-default').stop(true,true).css({'display':'inline-block'});
        $(this).css({'display':'none'});
    });
});

但是，如果我能给你一个建议你必须在css中这样做，它很简单而且非常精简。

here你可以找到两个解决方案。

jquery。每次移动鼠标时都会调用鼠标

2 个答案: