How can I have a mouseover event fire for a child element if the parent element has a mouseover too?

Question

I have a "help" area on my page and anytime the user hovers over a table the help information should be updated. The problem is within the table I have a check box in 1 cell of each row, and when the user hovers over that checkbox I want the mouseover event of the checkbox to override the table event and for the checkbox help to be displayed. Currently the table mouseover works fine but nothing happens when I mouse over the checkbox.

<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

This is a nice way to detect using mouseover the current target element that is hovered, than using pure JS to retrieve the .tagName you can create a messages list object and retrieve the desired one.

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

});

---

If you want to clear your info message do like:

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

});