0

画像の表があります。各行にマウスを合わせると、絶対に配置された以前に非表示にされたdivにその画像が表示されます。現在表示されている画像にマウスを合わせると、画像がちらつかないようにtr mouseleaveイベントのバインドを解除し、画像divを離れるときにmouseleaveイベントを再バインドします。

mouseleaveイベントのバインドを解除することはできますが、再バインドするとちらつきが発生します。関連するコード：

<table border="1" id="photoTable">
<tbody> 
    <tr class="item">
        <td class="filename">
            GraphDataCAQ3UW88.png
        </td>
    </tr>
    </tbody>
</table>
<div id="thisPhoto"></div>

css：

#thisPhoto{
display:none;
position:absolute;
left:250px;
top:150px;
border: 1px solid black;
background-color:white;
padding:20px;
z-index:2;
}

js：

$(document).ready(function(){

(function($){
    $.fn.getThisPhoto = function(){
        return $(this).each(function(){
            //I've left out the code which gets the data to pass to $.get()
            $.get('administration/PhotoManagement/thisPhoto.cfm',
                data,
                function(response){
                    $('#thisPhoto').html(response).show();
                }
            );
        });
    };
})(jQuery);

   $('tr.item').hover(function(){       
    $(this).getThisPhoto();
},
function(){
    $('#thisPhoto').hide();
});

$('#thisPhoto').mouseenter(function(){
    $('tr.item').unbind('mouseleave');
}).mouseleave(function(){
    $('tr.item').bind('mouseleave', function(){
        $('#thisPhoto').hide();
    });
});

});

編集：私はシバン全体をdivでラップし、そのdivにmouseoutを設定して、hide（）関数とbind（）関数をトリガーすることでハッキングしました...正確には私が望んでいたことではありませんが、ピンチで実行されます。

4

2 に答える 2

1

このモデルがあなたの要件に合うかどうかはわかりませんが、あなたの内部でdiv#thisPhotoを個別に作成することを検討してください。このように、画像の上にマウスを置いている間、テーブルの行の上にマウスを置いたままになります。たとえば、マークアップは次のようになります。divtr

<tr>
    <td>
        <div class="thePhoto">
            <img src="http://www.mysite.com/images/Image001.jpg" />
        </div>
        Image001.jpg
    </td>
</tr>
<tr>
    <td>
        <div class="thePhoto">
            <img src="http://www.mysite.com/images/Image002.jpg" />
        </div>
        Image002.jpg
    </td>
</tr>

スタイルを指定するとdiv.thePhoto、スタイルを指定して、テーブルセルの左上隅を基準にして配置position: relativeできます。このように、イベントを各テーブル行にバインドし、その子要素を表示または非表示にするだけです。div.thePhoto > imgposition: absolute.hover().find("div.thePhoto")img

例については、このフィドルを参照してください。

于 2011-09-02T16:06:33.047 に答える
1

イベントをバインドおよびバインド解除する必要はありません。別のデザインパターンを使用する必要があります。

このフィドルを見てください：http：//jsfiddle.net/Diodeus/gHa4u/1/

于 2011-09-02T17:57:21.380 に答える