Erhalten jQuery Mouseout-Ereignis von allen untergeordneten Elementen ausgelöst

Question

Ich habe eine Tabelle innerhalb einer Div, die 8 Bilder enthält, ich möchte ein Mouseout-Ereignis für die Tabelle oder das Div auslösen, aber es wird nicht ausgelöst. Ich schätze, das liegt daran, dass die Maus tatsächlich jedes der Bilder verlässt, oder die td, oder tr etc ... gibt es eine Möglichkeit, das Mouseout-Ereignis für die gesamte Tabelle so zu propagieren, dass es sogar gefeuert wird von den Kindelementen? Das Markup ist einfach:

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

und mein jQuery-Code ist:

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

Ich kann nicht die einzelne mouseout Ereignisse für die Bilder schießen, weil es manchmal absolut Elemente über sie gelegt, die bewirkt, dass die mouseout-Ereignis, das vorzeitig ausgelöst wird. Sollte

Answer 1

sein:

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

Sie haben den "#" verpasst. Wenn Sie nur Bilder, versuchen:

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

PS. Haben Sie darüber nachgedacht, stattdessen $ ("...") .hover() zu verwenden?

Answer 2

Sollten Sie nicht #tbl verwenden, um die Tabelle auszuwählen?

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

Answer 3

Verwenden mouseleave Veranstaltung, die genau die gleiche Funktionalität hat, aber es funktioniert nicht mit untergeordneten Elementen Feuer.

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