hover鼠标移动（index与each的数量比较相似）

1、

HTML代码为：

<div class="row-fluid growth" id="growth">
     <div class="main">
          <ul class="circle_group">
              <li class="first"><img src="images/gr_1.png" alt=""></li>
              <li><img src="images/gr_2.png" alt=""></li>
              <li><img src="images/gr_3.png" alt=""></li>
              <li><img src="images/gr_4.png" alt=""></li>
              <li><img src="images/gr_5.png" alt=""></li>
          </ul>
          <div class="sentence"><span class="num">1.</span>2014年11月11日，第一版上架，萌Mark诞生啦！~</div>
          <div class="sentence hide"><span class="num">2.</span>2014年12月31日，萌Mark用户量突破5万！</div>
          <div class="sentence hide"><span class="num">3.</span>2015年1月，萌Mark入选蒲公英创业扶持计划</div>
          <div class="sentence hide"><span class="num">4.</span>2015年1月11日，萌Mark本进入2.0版设计阶段</div>
          <div class="sentence hide"><span class="num">5.</span>未来，我们还能创造更多奇迹！</div>
     </div>
</div>

JS代码为：

$(function(){
    $('.growth .circle_group img').hover(function(){
        var index=$(this).index('.circle_group img');
        $(this).attr('src','images/gr_'+(index+1)+'_hover.png');
        $('.growth .circle_group').parent().children('.sentence').hide(500);
        $('.growth .circle_group').parent().children('.sentence:eq('+index+')').slideDown(800);
    },function(){
        var index=$(this).index('.circle_group img')+1;
        $(this).attr('src','images/gr_'+index+'.png');
    })
})

其中index可以获取一个页面相同的属性出来，并有数量

本地效果为：desk/plug/hover/hover_one.html

线上效果为：http://www.yuchats.com/