jquery - 让所有子元素触发 jQuery mouseout 事件

Question

我在 Div 中有一个包含 8 个图像的表格，我想为表格或 div 触发 mouseout 事件，但它不会触发。我猜这是因为鼠标实际上离开了每个图像，或 td，或 tr 等......有没有办法让整个表的 mouseout 事件传播起来，以便它甚至被触发从子元素？标记很简单：

<div id=container>
  <table id="tbl">
    <tr>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
    </tr>
    <tr>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
    </tr>
  </table>
</div>

我的jQuery代码是：

$("#tbl").mouseout(function(){
  alert("out home");
});

我无法为图像触发单独的 mouseout 事件，因为有时它们上方绝对放置了元素，这会导致 mouseout 事件过早触发。

Answer 1

应该：

$("#tbl").mouseout(function(){
  alert("out home");
});

您错过了“#”。如果您只想要图像，请尝试：

$("#tbl >img").mouseout(function(){
  alert("out home");
});

PS。您是否考虑过使用 $("...").hover() 来代替？

Answer 2

您不应该使用#tbl 来选择表格吗？

$("#tbl").mouseout(function(){
  alert("out home");
});

Answer 3

使用mouseleave事件，它具有完全相同的功能，但不会与子元素一起触发。

$("#tbl").bind("mouseleave",function(){
  alert("out home");
});