如何防止子Div的Hover事件影响父Div？

Question

如何防止子Div的Hover事件影响父Div？

10

当我将鼠标悬停在 .mensal DIV 上时，它会触发父级 .opera DIV 的 mouseover 事件，这似乎是错误的。我只想让“高亮”效果在子级 .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>

- Miguel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thomas Jones · Accepted Answer

根据定义，悬停在子元素上也会悬停在父元素上。在HTML事件中不存在“阻塞”。

W3C事件模型有两个方法链：冒泡和捕获。

在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/