更改 InnerHtml 后 Mouseout 不起作用

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/ 上的演示