滑动图跑到hover图后面要怎么调
为什么我的滑动图片或跑到hover的图片后面，看不见
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.container{
width: 100%;
height: 500px;
border: 1px solid red;
}
.two{
position: relative;
left: 100px;
top: 50px;
}
.one{
width: 100px;
height: 100px;
position: absolute;
left:800px;
top:150px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".two").hover(function(){
$(".one").animate({left:'300px'},{duration:300});
},function(){
$(".one").animate({left:"800px"},{duration:300});
});
});
</script>
<body>
<div class="container">
<img class="one" src="img/egg.png"/>
<img class="two" src="img/pan.jpg"/>
</div>
</body>
</html>
