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

Question

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

#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>

Answer 1

根据定义，将鼠标悬停在孩子上，也将鼠标悬停在父母上。html事件中没有“阻止”。

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

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

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

您要停止此操作的唯一方法是通过向页面添加javascript以防止链接来防止冒泡。这在jQuery中很简单

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

});

在我看来，在处理CSS时，此答案完全无济于事。Javascript事件不会处理CSS选择器，也不会阻止它们。

不幸的是，仅凭CSS，我不知道实现此目的的方法（甚至在javascript中也可能很棘手）。CSS4选择器将允许您指定选择器的主题以便您可以执行以下操作

 #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;
}​