Получение события 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");
});

PS. Предполагалось ли использовать вместо этого $ ("..."). Hover ()?

Answer 2

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

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

Answer 3

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

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