防止在父div上触发div的悬停事件?
问题描述:
当我鼠标悬停.mensal
DIV它会触发mouseover父.opera
DIV,这似乎是错误的我。我只是想要“突出”效果来工作的孩子.opera
DIV。防止在父div上触发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>
答
根据定义,鼠标悬停在一个孩子,悬停在父也。 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/
感谢您的快速响应。 我已经添加了建议的代码,但不起作用! :( 在.mensal div中“悬停”仍然徘徊在父分区 – Miguel 2012-04-28 14:55:58
您使用的是jQuery吗?尝试从该方法返回false。此外,刚刚注意到一个错字,现在修复答案悬停是一个函数调用,所以它需要被关闭:) – 2012-04-28 15:08:30
ive添加了一些javascript实现,并修改了一些应该可以帮助的css – 2012-04-28 15:22:07