jq实现鼠标经过出现上拉菜单

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.clearfix{
zoom: 1;
}
.clearfix:after{
content:".";
display:block;
width:0;
height:0;
visibility: hidden;
overflow:hidden;
}
ul,li{
list-style:none;
}
img{
border:none;
vertical-align:middle;
}
a{
text-decoration: none;
color:#333;
}
.list li{
float:left;
width:162px;
height:162px;
position: relative;
overflow:hidden;
border:1px solid #ccc;
margin-right:10px;
}
.list-t,.list-b{
width:100%;
height:100%;
}
.list-t{
z-index:9;
}
.list-t img{
width:100%;
height:100%;
}
.list-b{
z-index:999;
position:absolute;
top:162px;
left:0;
background:#a3d39c;
}
</style>
</head>
<body>
<ul class="list clearfix">
<li>
<a href="javascript:void(0);">
<div class="list-t">
<img src="service-wd.png" alt=""/>
</div>
<div class="list-b">
123456
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="list-t">
<img src="service-wd.png" alt=""/>
</div>
<div class="list-b">
123456
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="list-t">
<img src="service-wd.png" alt=""/>
</div>
<div class="list-b">
123456
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="list-t">
<img src="service-wd.png" alt=""/>
</div>
<div class="list-b">
123456
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="list-t">
<img src="service-wd.png" alt=""/>
</div>
<div class="list-b">
123456
</div>
</a>
</li>
</ul>
</body>
<script src="../jquery-1.11.3.min.js"></script>
<script>
var timer;
$(".list li").hover(function(){
clearTimeout(timer);
var $this=$(this);
timer=window.setTimeout(function(){
$this.find(".list-b").animate({"top":0});
},300) },function(){
clearTimeout(timer);
$(this).find(".list-b").animate({"top":"162px"});
})
</script>
</html>