你的这个问题的出现，应该在鼠标移除事件上面，在鼠标移除的时候，如果没有点击则全局变量num的值没有变化，将num在赋给函数

我写的 可以借鉴下

    var num=2;

//li 元素绑定多个事件 按顺序依次触发

$('li').on('click mouseover mouseout',function (e) {

    if(e.type=='mouseover'){

         var num1=$(this).index()+1;

         light(num1);//这里的变量不能是全局变量

     }else if (e.type=='click') {

         num=$(this).index()+1;

         light(num);//这个一定要是全局已经定义的变量

     }else if (e.type=='mouseout') {

        $('li').css('background-position','0 0')

     };//鼠标移开先全部清除

     light(num);//再传入已经更新的num值 这样鼠标点击的效果就还在

 });

var light=function (num) {

    $('li').each(function (index) {

         if(index<num){

        $(this).css('background-position','0 -68px');

         };

     })

  };

  light(num);//先调用一次 放在最后 light函数要先加载

你用的jquery还是？monse事件已经生效了 背景图片已经变了 不同于css的hover，鼠标移开hover也没了