更改 InnerHtml 后 Mouseout 不起作用

Posted 2023-02-22

【中文标题】更改 InnerHtml 后 Mouseout 不起作用

【英文标题】：Mouseout Not Working After InnerHtml Changed

【发布时间】：2011-12-10 11:48:25

【问题描述】：

谁能解释一下原因

$(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/。非常感谢任何帮助！我

【参考方案1】：

因为.cont 元素内的所有元素都是绝对定位的。这使得实际容器的高度为零，因此没有什么可以捕捉到事件..

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

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

http://jsfiddle.net/CnWku/2/ 上的演示

【讨论】：

嗨 Gaby.. 感谢您的回复。我也认为这是问题所在。但是删除 absolute 并不能解决问题。 mouseout 事件有时会被捕获，但并非总是如此

@donysukardi，如果你能描述你希望页面如何工作，我们可以找到另一种方法来完成它。你必须使用绝对定位吗？ （即使是外部 div ？）

假设我想要一个带有图像的 DIV，并且我想在悬停时更改图像。但问题是这两个图像的高度不同。我希望 DIV 相对于当前位置变得更高，因此底部位置 0