Come posso attivare un evento mouseover per un elemento figlio se anche l'elemento genitore ha un mouseover?

Question

Ho un'area "help" sulla mia pagina e ogni volta che l'utente passa su una tabella le informazioni della guida devono essere aggiornate. Il problema è all'interno della tabella Ho una casella di controllo in 1 cella di ogni riga, e quando l'utente passa su quella casella voglio che l'evento mouseover della casella di controllo ignori l'evento tabella e che la casella di controllo aiuti a essere visualizzata. Attualmente il mouseover della tabella funziona bene ma non succede nulla quando topo il mouse sulla casella di controllo.

<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

Questo è un bel modo per rilevare utilizzando mouseover la corrente target elemento che aleggiava, rispetto all'utilizzo di pura JS per recuperare il .tagName è possibile creare un messaggi lista oggetto e recuperare quello desiderato.

$('.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]); 

}); 

---

Se si desidera cancellare il messaggio informazioni mi piacciono:

$('.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

Poiché la mouseover per la tabella è per l'intera area, basta chiamare mouseenter invece. È quindi possibile aggiungere un mouseout a reupdate dopo aver lasciato la tabella.

Answer 3

Suoni come si desidera avere il passaggio del mouse per la casella di controllo interrompere la propagazione fino alla tabella?

Se è così, questo dovrebbe farlo.

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