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

Question

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

代码如下：

$(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你可以找到两个解决方案。