html css hover事件,css – 防止在父Div上触发Div的Hover事件？

根据定义,将鼠标悬停在孩子身上,也会悬停在父母身上. html事件中没有“阻塞”.

有两个方法链,泡沫和捕获.

Any event taking place in the W3C event model is first captured until

it reaches the target element and then bubbles up again.

你要阻止这种情况的唯一方法是通过向你的页面添加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;

}​