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

マウスのenterメソッド内から要素を非表示にしているため、マウスは要素を再び離れ、要素が再び表示されます。これが繰り返され、観察した動作が発生します。

ハンドラーを外側のdivにアタッチして、そこで可視性を処理することをお勧めします。

于 2012-08-14T12:56:58.947 に答える
0

これを試して ：

$(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でそれをしなければなりません。それは単純で非常に軽いです。

ここでは、2つの解決策を見つけることができます。

于 2012-08-14T13:18:59.453 に答える