案例效果

 代码实现

jQuery代码（两种方法）

方法一：hover版

        $(function () {$(".king li").hover(function() {$(this).addClass("current").siblings().removeClass("current");}, function() {$(".king li").eq(0).addClass("current").siblings().removeClass("current");})})

方法二：mouseenter版

        $(function () {// ① 鼠标经过某个小li 有两步操作：$(".king li").mouseenter(function () {// ② 当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入$(this).stop().animate({width: 224,}, 200).find(".small").fadeOut().siblings(".big").stop().fadeIn();// ③ 其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出$(this).siblings("li").stop().animate({width: 69,}, 200).find(".small").fadeIn().siblings(".big").stop().fadeOut();})})