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

 <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内部  也出现了这种情况，说明确实是覆盖了