mouseover 与mouseout事件在绝对定位时层的有关问题(覆盖有关问题)
mouseover 与mouseout事件在绝对定位时层的问题(覆盖问题)
说明 在li上面绝对定位一个a链接(display=block)并且宽度高度全部继承父元素,移入鼠标发现淡入淡出两次,这是为什么??
可能是鼠标移入时a显示 但a定位是绝对定位,在li之上,故相当于覆盖了li,触发了onmouseout事件,故这样,将a放在外面就不会这样了
test 是red div2为green 将div2定位于test内部 也出现了这种情况,说明确实是覆盖了
<div class="inner"> <ul> <li><img src="img/1.jpg" alt=""><a href="#">It belongs to you!...</a></li> <li><img src="img/2.jpg" alt=""><a href="#">It belongs to you!...</a></li> </ul> </div> css .content li{list-style-type: none;float: left;width: 1140px;position: relative;} .content ul{width: 5700px;overflow: hidden;position: absolute;} //.content{margin: 50px 0px 20px;height: 500px;} .inner{margin:0px 110px;background-color: #fff;height: inherit;overflow: hidden;position: relative;} js 绑定鼠标移入移出事件 $('.inner li').bind({ 'mouseover':function(){ clearInterval(timer); $('.content ul a').fadeIn(500); } 'mouseout':function(){$('.content ul a').fadeOut(500)} })
说明 在li上面绝对定位一个a链接(display=block)并且宽度高度全部继承父元素,移入鼠标发现淡入淡出两次,这是为什么??
可能是鼠标移入时a显示 但a定位是绝对定位,在li之上,故相当于覆盖了li,触发了onmouseout事件,故这样,将a放在外面就不会这样了
<div class="div2"></div> <div class="test"></div>
test 是red div2为green 将div2定位于test内部 也出现了这种情况,说明确实是覆盖了