画像の表があります。各行にマウスを合わせると、絶対に配置された以前に非表示にされた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()関数をトリガーすることでハッキングしました...正確には私が望んでいたことではありませんが、ピンチで実行されます。