防止在父 Div 上触发 Div 的悬停事件？

Posted 2023-05-08

【中文标题】防止在父 Div 上触发 Div 的悬停事件？

【英文标题】：Preventing Hover event of a Div triggering on parent Div?

【发布时间】：2012-05-09 00:30:14

【问题描述】：

当我将鼠标悬停在 .mensal DIV 上时，它会触发鼠标悬停在父 .opera DIV 上，这对我来说似乎是错误的。我只是想让“突出显示”效果对孩子.opera DIV 起作用。

#operaContent 
  padding: 0 50px 0 50px;
  position: relative;
  overflow: visible;

#operaContent .opera 
  display: block;
  border: 1px solid #FFFFFF;
  border-bottom: 1px solid #DDDDDD;
  padding: 5px;
  margin-bottom: 10px;
  height: 120px;
  background-color: #0A8ECC;

#operaContent .opera:hover 
  border: 1px solid #AAAAAA;
  background-color: #DDDDDD;
  cursor: pointer;

.mensal 
  position: absolute;
  top: 1px;
  left: 8px;
  z-index: 3;
  display: block;

<div id="operaContent">
  <div class="opera">
    <div class="mensal">
      DIV
    </div>
  </div>
</div>

【参考方案1】：

根据定义，鼠标悬停在子节点上时，也会悬停在父节点上。 html 事件中没有“阻塞”。

有两个方法链，气泡和捕获。

在 W3C 事件模型中发生的任何事件都会首先被捕获，直到 它到达目标元素，然后再次冒泡。

http://www.quirksmode.org/js/events_order.html

您要阻止这种情况的唯一方法是通过在您的页面中添加 javascript 以防止链来防止冒泡。这在 jQuery 中很简单

$('.mensal').hover(function(e)
    e.stopPropagation();

);

在我看来，这个答案在处理 CSS 时完全没有帮助。 Javascript 事件不处理 CSS 选择器或阻止它们。

不幸的是，仅使用 CSS，我不知道如何实现这一点（即使在 javascript 中也可能会变得棘手）。 CSS 4 选择器将允许您指定选择器 http://dev.w3.org/csswg/selectors4/#subject 的主题，以便您可以执行类似的操作

 #operaContent .opera:hover! .mensal:not(:hover)  /*your css*/ 

但这还没有实现，并且仍在为草案制定。

编辑： 这是一个适合您的 javascript (jQuery) 实现

​

$(function()
    $('.opera').hover(function() $(this).addClass('hoverIntent'), 
                      function() $(this).removeClass('hoverIntent'); 
                     );

    $('.opera .mensal').hover(function() 
        $(this).parent('.opera').removeClass('hoverIntent');
    );

)​

以及修改后的 CSS

#operaContent 
    padding: 0 50px 0 50px;
    position: relative;
    overflow: visible;


#operaContent .opera 
    display: block;
    border: 1px solid #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    padding: 5px;
    margin-bottom: 10px;
    height: 120px;
    background-color: #0A8ECC;



#operaContent .opera.hoverIntent 
    border: 1px solid #AAAAAA;
    background-color: #DDDDDD;
    cursor: pointer;


.mensal 
    position: absolute;
    top: 1px;
    left: 8px;
    z-index: 3;
    display: block;
​

以及必备的工作演示：http://jsfiddle.net/WB6Ty/

【讨论】：

感谢您的快速回复。我已经添加了建议的代码，但不起作用！ :( .mensal div 中的“悬停”仍然悬停在父 div 上。

你在使用 jQuery 吗？尝试从该方法返回 false。另外，刚刚注意到一个错字，现在修复答案。悬停是一个函数调用，所以需要关闭:)

我添加了一个带有一些修改过的 css 的 javascript 实现

你不是说 stopPropagation 而不是 preventDefault 吗？

@j08691 是的。那是正确的。要停止冒泡，您需要api.jquery.com/event.stopPropagation 而不是api.jquery.com/event.preventDefault 好接。