当鼠标移动到某个图片的时候，图片变化。当鼠标移出去的时候，图片变回来。下面是三种写法：
第一种，也是最笨，最麻烦的写法，如下：
1 $(".web-footer2 .inner").each(function(){
2 $(this).find("ul").eq(1).find("img").eq(0).hover(function(){
3 $(this).attr("src","/img/footer-qq2.png");
4 },function(){
5 $(this).attr("src","/img/footer-qq.png");
6 })
7 $(this).find("ul").eq(1).find("img").eq(1).hover(function(){
8 $(this).attr("src","/img/footer-weibo2.png");
9 },function(){
10 $(this).attr("src","/img/footer-weibo.png");
11 })
12 $(this).find("ul").eq(1).find("img").eq(2).hover(function(){
13 $(this).attr("src","/img/footer-qqweibo2.png");
14 },function(){
15 $(this).attr("src","/img/footer-qqweibo.png");
16 })
17 $(this).find("ul").eq(1).find("img").eq(3).hover(function(){
18 $(this).attr("src","/img/footer-weixin2.png");
19 },function(){
20 $(this).attr("src","/img/footer-weixin.png");
21 })
22 })
用了each、find、eq、hover。代码重复、臃肿。而且可移植性特别差。下面是第二种
1 $(".web-footer2 .inner").on("mouseover mouseout","ul:eq(1) img",function(e){
2 if(e.type=="mouseover"){
3 if($(this).attr("src") == "/img/footer-qq.png"){
4 $(this).attr("src","/img/footer-qq2.png")
5 }else if(....){....}
6 }else if(e.type=="mouseout"){
7 if($(this).attr("src") == "/img/footer-qq2.png"){
8 $(this).attr("src","/img/footer-qq.png")
9 }else if(....){....}
10 }
11 })
用了on、attr函数，虽然代码量减少，但可移植性还是特别的差。那么就有了第三种
1 $(".web-footer2 .inner").on("mouseover mouseout","ul:eq(1) img",function(e){
2 var img_arr = [
3 ["/img/footer-qq.png","/img/footer-qq2.png"],
4 ["/img/footer-weibo.png","/img/footer-weibo2.png"],
5 ["/img/footer-qqweibo.png","/img/footer-qqweibo2.png"],
6 ["/img/footer-weixin.png","/img/footer-weixin2.png"]
7 ];
8 var img_src = $(this).attr("src");
9 if(event.type=="mouseover"){
10 for(i=0;i<4;i++){
11 if($.inArray(img_src,img_arr[i]) !== -1){
12 if(img_src == img_arr[i][0]){
13 $(this).attr("src",img_arr[i][1]);
14 }
15 }
16 }
17 }else if(event.type=="mouseout"){
18 for(i=0;i<4;i++){
19 if($.inArray(img_src,img_arr[i]) !== -1){
20 if(img_src == img_arr[i][1]){
21 $(this).attr("src",img_arr[i][0]);
22 }
23 }
24 }
25 }
26 })
现在我重点来说第三种，也就是这一种。先把图片变化前的路径和变化后的路径放到二维数组里(img_arr变量)，img_src其实可以不需要，我只是为了方便。然后用if判断语句，判断event.type是否 mouseover，也就是是否移到图片上，当移到图片上的时候用for循环，不用for循环的话。你移到一个图片上后，所有图片都会变。因为有4张图，所以i=0;i<4。如果你的图片不确定有多少的话，你可以设置几个变量，如下
var img_length = $(".web-footer2 .inner").find("img"); //某个元素里的图片总数。
然后改下for循环语句为for(i=0;i<img_length.length;i++) 就行了
然后再来一个if语句，判断当前鼠标移到的图片地址是否在img_arr二维数组里(如果不存在返回-1，如果存在返回在数组里的第几个)，如果存在，则再判断，当前这个图片地址是否在对应二维数组里的第一个数组里的值(这话比较难理解，就是img_arr里的"/img/footer-qq.png"、"/img/footer-weibo.png"、"/img/footer-qqweibo.png"、["/img/footer-weixin.png")如果是相对应，就把当前鼠标所在的图片改成二维数组里的第二个数组里的值，也就是("/img/footer-qq2.png"、"/img/footer-weibo2.png"、"/img/footer-qqweibo2.png"、"/img/footer-weixin2.png")