jquery - 如果父元素也有鼠标悬停，如何让子元素触发鼠标悬停事件？

Question

我的页面上有一个“帮助”区域，只要用户将鼠标悬停在表格上，就应该更新帮助信息。问题出在表格中，我在每行的 1 个单元格中有一个复选框，当用户将鼠标悬停在该复选框上时，我希望复选框的 mouseover 事件覆盖表格事件并显示复选框帮助。目前表格鼠标悬停工作正常，但当我将鼠标悬停在复选框上时没有任何反应。

<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

mouseover这是一种使用悬停的当前target元素检测的好方法，而不是使用纯 JS 来检索.tagName您可以创建一个消息列表对象并检索所需的对象。

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

});

---

如果您想清除您的信息消息，请执行以下操作：

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

听起来您想让复选框的鼠标悬停停止传播到表格？

如果是这样，这应该这样做。

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

Answer 3

由于mouseoverfor table 是针对整个区域的，因此只需调用即可mouseenter。mouseout然后，您可以在他们离开餐桌后添加一个重新更新。