问题绑定鼠标事件

我有一个图像表。每一行当被淹没时，都会显示它的图像，该图像位于已绝对定位的以前隐藏的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来触发设置鼠标移开黑客攻击hide（）和bind（）函数...不完全是我想要的，但它会在一个捏。

来源

2011-09-02 earachefl

我不确定此模型是否可以满足您的要求，但可以考虑在tr内将div#thisPhoto分为div。这样，当你在图像上被蒙上阴影时，你仍然被掩盖在表格行上。例如，标记会是这样的：

<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元素。

查看this fiddle的例子。

来源

2011-09-02 16:06:33 lsuarez

尼斯 - 会试一试。我正在使用dataTables插件，所以我不确定额外的div是否会打破它。 – earachefl

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

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

来源

2011-09-02 17:57:21

是的，我想到了......解决方案的唯一问题是，您必须确保输入新显示的div以关闭它。虽然比闪烁更好！ – earachefl

问题绑定鼠标事件

回答

相关问题