1

サムネイル画像にカーソルを合わせるとオーバーレイが追加され、離れるとオーバーレイが削除される関数を作成しようとしています。これが私のHTMLです...

<div class="thumb"><img src="i/testThumb.gif" /></div>

そして、ここに私のjQueryがあります...

$('.thumb').live('mouseover', function(event){
    if($(this).find('.overlay').length == 0){
        $(this).prepend('<div class="overlay"></div>');
    }
    return false;
});
$('#galleryPanel .thumb').live('mouseout', function(event){
    $(this).find('.overlay').remove();
    return false;
});

問題は、オーバーレイが作成されたときにマウスがすでにその上にあり、それによってコンテナーの「マウスアウト」がトリガーされ、オーバーレイが削除され、オンとオフが連続して点滅することです。

これに対する簡単な解決策はありますか？

4

3 に答える 3

0

これは少しハックに聞こえるかもしれませんが、変数 (dom 要素の場合は css クラスを使用します) を使用して、この要素でイベントが発生するのが初めてかどうかを知ることができます。

基本的に、関数は dom 要素でこの css クラスの存在を探しますが、作成時にデフォルトでは存在しません。そこにない場合は、クラスを追加して関数を終了します。存在する場合、ヒットは有効であり、オーバーレイ機能を実行する必要があります。dom 要素には複数のクラスを設定できるため、スタイリングに使用される他のクラスと競合することはありません。カスタム属性を使用すると、html が検索クローラーに対して「無効」になるため、カスタム属性の代わりにクラスを使用することをお勧めします。

于 2009-02-13T17:35:50.897 に答える