javascript - InnerHtml 更改后鼠标无法工作

Question

谁能给我解释一下为什么

$(document).ready(function(){   
   $("#fitness").mouseenter(function() {
  $("#fitness .cont").html(jQuery('#fitness_content').html());  
}).mouseleave(function(){
  $("#fitness .cont").html(jQuery('#fitness_img').html());
  }) 
});

不工作。 mouseout 或 mouseleave 事件似乎没有被捕获。和DIV的大小有关系吗？我尝试使用live和bind，但它也不起作用。它起作用的唯一情况是当我直接使用 attr 方法更新 img src 时。不过我希望能够将图像包装在某个 DIV 中。请查看http://jsfiddle.net/donysukardi/CnWku/ 。非常感谢任何帮助!我

Answer 1

因为 .cont 元素内的所有元素都是绝对定位的。这使得实际容器的高度为零，因此没有任何东西可以捕获事件..

如果你给容器加上边框，你就会明白我的意思..

删除除容器之外的所有元素的绝对位置似乎可以解决问题..

演示地址:http://jsfiddle.net/CnWku/2/