如果父元素也有鼠标悬停，如何为子元素触发mouseover事件？

Question

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

<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您可以创建消息列表< / em>对象并检索所需的对象。

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

由于表格的mouseover适用于整个区域，因此只需拨打mouseenter即可。然后，您可以在离开表格后添加mouseout以重新更新。