多控件鼠标经过切换内容两种方式

在一个电商网站里，小编遇到一个这样的情况：商品浏览页面，请求后台信息，创建多个商品的div，鼠标经过每一个商品，下方的商品信息部分需要向上滑动。

1、hover直接绑定在目标元素上

<pre></pre>

$('.spwrap').hover(function() {

                      $(this).find('.sp').animate({'top':'-53px'});

                              },
                   function() {

                      $(this).find('.sp').animate({'top':'2px'});

                   })//商品信息轮换

2、采用事件委托，将鼠标事件绑定在父级元素上。

on()函数的第二个参数是事件委托的直接目标元素

$('.cs_ul').on('mouseover','.spwrap',function(event) {

   event.stopPropagation();//阻止冒泡

   $(this).find('.sp').animate({'top':'-53px'},"fast");

   return false;
});
$('.cs_ul').on('mouseleave','.spwrap',function(event) {

   event.stopPropagation();//阻止冒泡

   $(this).find('.sp').animate({'top':'2px'},"fast");

   return false;
});