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

Question

当我鼠标悬停.mensal DIV它会触发mouseover父.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>

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中也可能会变得棘手）。 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; 
}​ 

和obligitory工作演示工作：http://jsfiddle.net/WB6Ty/