鼠标放上去后会有个绿条升起来。<ul class="img_box">
<li>
<a href="#" target="_blank"><img src="cz20170227_1_img1.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li>
<a href="#" target="_blank"><img src="cz20170227_1_img2.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li style="margin-right:0px;">
<a href="#" target="_blank"><img src="cz20170227_1_img3.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li>
<a href="#" target="_blank"><img src="cz20170227_1_img4.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li>
<a href="#" target="_blank"><img src="cz20170227_1_img5.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
<li style="margin-right:0px;">
<a href="#" target="_blank"><img src="cz20170227_1_img6.png"></a>
<div><a href="#" target="_blank">新学期交通安全进校园活动正如火如荼地开展中</a></div>
</li>
</ul>
.img_box{width:940px;padding:0 30px;}
.img_box li{position:relative;width:280px;height:180px;float:left;display:inline;overflow:hidden;margin-right:36px;margin-bottom:30px;}
.img_box li div{position:absolute;left:0;bottom:-35px;width:280px;height:35px; background:#999;text-align:center;z-index:9999;}
.img_box li div a{font:12px/35px "宋体";}
.img_box li div.blue{background:#B4CAD7;}
.img_box li div.green{background:#C8E162;}
$(document).ready(function() {
$('.img_box li div:even').addClass('blue');
$('.img_box li div:odd').addClass('green');
$('.img_box li').mouseover(function(){
var index =$(this).index();
$('.img_box li div').eq(index).stop().animate({bottom:0},200);
});
$('.img_box li').mouseout(function(){
var index =$(this).index();
$('.img_box li div').eq(index).stop().animate({bottom:-35},200);
});
});代码如上
由于页面有2个部分有这种效果，然而做完后发现只有第一个部分有效果，求大神指点
