正文 

当前位置： 首页 > 源码 >

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

     2023-05-08     136

关键词：

【中文标题】如果父元素也有鼠标悬停，如何为子元素触发鼠标悬停事件？【英文标题】：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 在这里有最好的解决方案。确实很好。

CSS减轻父鼠标悬停的子元素

...）。两个孩子divs的颜色应该会改变并变得稍微浅一些。如果可能，我想避免使用java 查看详情

在父元素的触发器中设置子元素的属性

】在父元素的触发器中设置子元素的属性【英文标题】：Setapropertyonchildelementintriggeronparentelement【发布时间】：2021-12-1106:58:35【问题描述】：我有一个Grid，它由两行和第二行的一个矩形组成。每当鼠标悬停在网格上时，我都想将... 查看详情

子元素的 JavaScript 鼠标悬停/鼠标移出问题

】子元素的JavaScript鼠标悬停/鼠标移出问题【英文标题】：JavaScriptmouseover/mouseoutissuewithchildelement【发布时间】：2012-05-2323:36:53【问题描述】：我有这个小问题，我请求您的帮助。我有一个div元素，里面有一个img元素，像这样<di... 查看详情

如何禁用由子元素触发的 mouseout 事件？

】如何禁用由子元素触发的mouseout事件？【英文标题】：Howtodisablemouseouteventstriggeredbychildelements?【发布时间】：2010-09-2522:11:07【问题描述】：让我详细描述一下这个问题：当鼠标悬停在一个元素上时，我想显示一个绝对定位的div... 查看详情

通过 CSS 将鼠标悬停在父元素上时显示 :after

】通过CSS将鼠标悬停在父元素上时显示:after【英文标题】：Show:afterwhenhoveringovertheparentelementviaCSS【发布时间】：2013-03-0711:57:06【问题描述】：当我将鼠标悬停在父元素本身上时，是否可以display:block;:after伪元素？#myDivposition:relativ... 查看详情

在没有jQuery的情况下悬停父绝对div的子元素时防止onmouseout

】在没有jQuery的情况下悬停父绝对div的子元素时防止onmouseout【英文标题】：PreventonmouseoutwhenhoveringchildelementoftheparentabsolutedivWITHOUTjQuery【发布时间】：2011-06-0912:36:14【问题描述】：我在使用绝对定位div中的onmouseout函数时遇到问题... 查看详情

触发：悬停在移动元素上而不移动鼠标

】触发：悬停在移动元素上而不移动鼠标【英文标题】：Triggering:hoveronmovingelementwithoutmovingmouse【发布时间】：2019-01-1211:03:06【问题描述】：#boxanimation:scroll2slinearinfinite;width:100px;height:100px;background:red;#box:hoverbackground:green;@keyframes 查看详情

div鼠标悬停，子元素上移，鼠标移出，子元素下移动画。

HTML：　　　　　　　　　　　　　　<divclass="edt_title"><divid="edt_title"><pclass="edt_title_top">e定投</p><divclass="product_line"></div><pclass="edt_title_c">多种期限<br/> 查看详情

拖动元素jquery ui时连续触发鼠标悬停事件？

】拖动元素jqueryui时连续触发鼠标悬停事件？【英文标题】：Continuallyfiremouseovereventwhiledraggingoveranelementjqueryui?【发布时间】：2016-04-2702:03:10【问题描述】：希望这是有道理的。我正在使用jqueryUI创建一个拖放模式。我将我的代码... 查看详情

Javascript 或 Jquery 检查是不是将鼠标悬停在元素上

...多个元素上时，每个元素都会触发一个特定的文本消息，如果没有一个元素悬停在其上，则没有文本。从其他问题中，我发现$("# 查看详情

如何确定鼠标相对于父元素的悬停位置

】如何确定鼠标相对于父元素的悬停位置【英文标题】：Howtodeterminewherethemouseishoveringrelativetoaparentelement【发布时间】：2012-04-1922:13:52【问题描述】：我正在为支持拖放的树视图实现拖放。树中有文件夹和文件。当我拖过文件夹... 查看详情

jQuery Time 鼠标悬停在元素上（悬停）

】jQueryTime鼠标悬停在元素上（悬停）【英文标题】：jQueryTimemouseisoverelement(Hover)【发布时间】：2011-06-0204:16:42【问题描述】：我在几个链接上附加了一个悬停事件，当你越过它时会出现一个框。有没有一种方法可以让悬停事件仅... 查看详情

使用 css 将鼠标悬停在第一个子元素上时更改其他子元素

】使用css将鼠标悬停在第一个子元素上时更改其他子元素【英文标题】：Changingotherchildelementswhenhoveringoverfirstchildusingcss【发布时间】：2013-02-0502:18:06【问题描述】：我试图在div的第一个孩子上使用悬停来影响第三个孩子。有谁知... 查看详情

仅当鼠标悬停在元素上至少特定时间时，如何触发 MouseMove 事件？

】仅当鼠标悬停在元素上至少特定时间时，如何触发MouseMove事件？【英文标题】：HowtohaveaMouseMoveeventfireonlyifthemouseishoveredoveranelementforatleastaspecificamountoftime?【发布时间】：2014-06-2700:15:04【问题描述】：当用户将鼠标指针移到JPanel... 查看详情

浏览器事件：当您使元素可见（并且鼠标在其上）时，不会发生鼠标悬停]](代码片段)

.../pen/GRRamJe。您将需要移动鼠标以触发“鼠标悬停”。但是如果我重复此操作，则在CHROME浏览器中将HTML写入本地文件中，则会触发mouseover，但不会在IE11或Edge中触发。实际上，当在元素上可见时，我观察到3个变体：发生鼠标悬停... 查看详情

jQuery：将鼠标悬停在其上时保持切换的子元素打开

】jQuery：将鼠标悬停在其上时保持切换的子元素打开【英文标题】：jQuery:keeptoggledchildelementopenwhenhoveringoverit【发布时间】：2011-05-0213:41:03【问题描述】：我的问题类似，但与jquery-hover-menu-when-hovering-over-child-menu-disappears不同。我... 查看详情

CSS 效果 :hover::after 在子元素上 :hover 在父元素上

】CSS效果:hover::after在子元素上:hover在父元素上【英文标题】：CSSeffect:hover::afteronchildelementon:hoveronparent【发布时间】：2021-09-2308:13:43【问题描述】：当我将鼠标悬停在div上时，我很难在div的文本上获得CSS悬停效果。当我将鼠标悬... 查看详情

jQuery悬停隐藏在子元素上

】jQuery悬停隐藏在子元素上【英文标题】：jqueryhoverhidesonchildelement【发布时间】：2011-11-2905:44:32【问题描述】：现场示例：http://jsbin.com/axaqoc/2当我尝试选择子选择框时，下拉菜单隐藏起来，认为鼠标离开了父元素。js代码：（完... 查看详情