0

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

这是代码：

$(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>
4

2 回答 2

2

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

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

于 2012-08-14T12:56:58.947 回答
0

Try this :

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

But if I can give you an advice you must do that in css it is simple and quite lite.

here you can find the two solutions.

于 2012-08-14T13:18:59.453 回答