Получение события jQuery mouseout для запуска из всех дочерних элементов

Question

У меня есть таблица внутри Div, содержащая 8 изображений, я хочу запустить событие mouseout либо для таблицы, либо для div, но оно не срабатывает.Я предполагаю, что это потому, что мышь фактически покидает каждое изображение, или 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");
});

ПС.Рассматривали ли вы вместо этого использование $( "...").hover()?

Answer 2

Разве вы не должны использовать #tbl для выбора таблицы?

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

Answer 3

Использовать mouseleave событие, которое имеет точно такую ​​же функциональность, но не срабатывает с дочерними элементами.

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