Getting jQuery mouseout event to fire from all child elements

Question

I have a table inside of a Div, containing 8 images, I want to fire a mouseout event for either the table or the div, but it doesn't fire. I'm guessing this is because the mouse is actually leaving each of the images, or the td, or the tr etc... is there a way to get the mouseout event for the entire table to propagate up so that it is fired even from the child elements? The markup is straight forward:

<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>

and my jQuery code is:

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

I can't fire the individual mouseout events for the images because there are sometimes absolutely placed elements over them which causes the mouseout event to be fired prematurely.

Answer 1

Should be:

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

You have missed the "#". If you want only images, try:

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

PS. Did you considered to use $( "...").hover( ), instead?

Answer 2

Shouldn't you use #tbl to select the table?

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

Answer 3

Use mouseleave event, which has exact same functionality but it doesn't fire with child elements.

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