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

Posted 2023-05-08

【中文标题】如果父元素也有鼠标悬停，如何为子元素触发鼠标悬停事件？

【英文标题】：How can I have a mouseover event fire for a child element if the parent element has a mouseover too?

【发布时间】：2013-02-22 00:28:42

【问题描述】：

我的页面上有一个“帮助”区域，只要用户将鼠标悬停在表格上，就应该更新帮助信息。问题出在表格中，我在每行的 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");
);

【参考方案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();

);

【讨论】：

@Mercurybullet :) 谢谢哈哈哈，但如果只是为了“甜蜜”按钮，您可以删除 +1 :)（P.S 您可以随意使用和滥用 :D）

不得不承认，这是一个非常甜蜜的 liveemo。几乎感到内疚，你为了回答这个问题而费了这么大的力气。我很快就想起了为什么我喜欢这个网站！

@JSilva :) 如果不是因为这个网站，我可能一辈子都不会开始编程（或者我肯定会很快退出 :D）。谢谢你提醒我！

【参考方案2】：

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

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

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

【讨论】：

很高兴我能帮上忙。如果它有助于解决您的问题，请不要忘记将答案标记为已接受。 :)

【参考方案3】：

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

【讨论】：

但挑战是输入复选框在表格内，那么我将如何触发表格的鼠标移出？

方法很多，但 Mercurybullet 在这里有最好的解决方案。确实很好。