mouseover 与mouseout事件在绝对定位时层的问题（覆盖问题）

最新推荐文章于 2023-04-19 17:21:09 发布

iteye_9473

最新推荐文章于 2023-04-19 17:21:09 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 ViewUI

本文链接：https://blog.csdn.net/iteye_9473/article/details/82619385

版权



 <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内部也出现了这种情况，说明确实是覆盖了
[img]http://dl2.iteye.com/upload/attachment/0108/7636/5fdc0ed7-feb9-36db-8d63-5086141b8040.png[/img]