Wie kann ich ein mouseover -Ereignisfeuer für ein Kindelement haben, wenn das Elternelement auch einen MouseOver hat?

Question

Ich habe einen "Hilfe" -Bereich auf meiner Seite und wenn der Benutzer über eine Tabelle schwebt, sollten die Hilfeinformationen aktualisiert werden. Das Problem ist in der Tabelle Ich habe ein Kontrollkästchen in 1 Zelle jeder Zeile, und wenn der Benutzer über dieses Kontrollkästchen bewegt, möchte ich das Mouseover-Ereignis des Kontrollkästchens das Tabellenereignis überschreiben und für die Kontrollkästchen Hilfe angezeigt werden. Momentan funktioniert der Tabellenmouseover gut, aber nichts passiert, wenn ich die Maus über das Kontrollkästchen bewege.

<table class="myTable"> 
    <tr> 
     <th>Col1</th> 
     <th>Col2</th> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 2</td> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 3</td> 
    </tr> 
</table> 

<div class="myHelpMenu"></div> 


$('.myCheckbox').mouseover(function() { 
    $('.myHelpMenu').html("this is my checkbox help"); 
}); 

$('.myTable').mouseover(function() { 
    $('.myHelpMenu').html("this is my tables help"); 
}); 

Answer 1

LIVE DEMO

Dies ist eine nette Art und Weise mit mouseover das aktuellen target Elemente zu erfassen, das schwebte ist, als reinen JS mit dem .tagName Sie abrufen können ein Nachrichtenliste Objekt erstellen und den gewünschten abrufen.

$('.myTable').mouseover(function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

}); 

---

Wenn Sie möchten, dass Ihre Informationen Meldung löschen mögen:

$('.myTable').on('mouseover mouseleave',function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

    if(e.type=='mouseleave') 
    $('.myHelpMenu').empty(); 

}); 

Answer 2

Da die mouseover für die Tabelle ist für den gesamten Bereich, rufen Sie einfach mouseenter statt. Sie könnten dann eine mouseout hinzufügen, um nach dem Verlassen der Tabelle erneut zu aktualisieren.

Answer 3

Klingt, als ob Sie den Mouseover für das Kontrollkästchen haben wollen, um die Ausbreitung auf den Tisch zu stoppen?

Wenn ja, sollte dies tun.

$('.myCheckbox').mouseover(function(e) { 
    $('.myHelpMenu').html("this is my checkbox help"); 
    e.stopPropagation(); 
});