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

});

编辑：我通过将整个 shebang 包装在一个 div 中并在该 div 上设置 mouseout 以触发 hide() 和 bind() 函数来破解它......这不完全是我想要的，但它会在紧要关头完成。

4

2 回答 2

1

您不需要绑定和取消绑定事件，您需要使用不同的设计模式。

看看这个小提琴：http: //jsfiddle.net/Diodeus/gHa4u/1/

于 2011-09-02T17:57:21.380 回答
1

我不确定这个模型是否能满足你的要求，但考虑div#thisPhoto在div你的tr. 这样，当您将鼠标悬停在图像上时，您仍将鼠标悬停在表格行上。例如，标记将类似于：

<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 > img样式position: absolute并将其相对于表格单元格的左上角定位。这样，您只需将.hover()事件绑定到每个表格行.find("div.thePhoto")并显示或隐藏其子img元素。

有关示例，请参见此小提琴。

于 2011-09-02T16:06:33.047 回答