大佬教程收集整理的这篇文章主要介绍了css – 防止在父Div上触发Div的Hover事件?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
#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>
有两个方法链,泡沫和捕获.
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/
以上是大佬教程为你收集整理的css – 防止在父Div上触发Div的Hover事件?全部内容,希望文章能够帮你解决css – 防止在父Div上触发Div的Hover事件?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。