Obtendo evento mouseout jQuery ao fogo de todos os elementos filhos

Question

Eu tenho um dentro mesa de um Div, contendo 8 imagens, eu quero acionar um evento mouseout para qualquer tabela ou o div, mas não dispara. Eu estou supondo que isto é porque o mouse está realmente deixando cada uma das imagens, ou o td, ou tr etc ... Existe uma maneira de obter o evento mouseout para a tabela inteira a propagar-se para que ele seja demitido mesmo dos elementos filhos? A marcação é para a frente:

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

e meu código jQuery é:

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

Eu não posso disparar os eventos mouseout individuais para as imagens, porque não são, por vezes absolutamente colocados elementos sobre eles que faz com que o evento mouseout para ser disparado prematuramente.

Answer 1

Deve ser:

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

Você perdeu os "#". Se você quiser apenas imagens, tente:

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

PS. Será que você considera usar $ ( "..."). Pairar (), em vez disso?

Answer 2

Você não deveria usar #tbl para selecionar a tabela?

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

Answer 3

Use evento mouseleave, que tem exatamente a mesma funcionalidade, mas não faz fogo com elementos filhos.

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