关于鼠标移除和移入的函数

li[i].onmouseover=function(){
               for(var n=0;n<li.length;n++){
                   li[n].className="";
                   div[n].className="hide";
               }
               this.className="on";
               div[this.index].className="";
           }

为什么移出的效果

this.className="on";

div[this.index].className="";

这两行代码就可以实现，是什么原理呢，我之前想的是按上一节的变色函数那样，写一个onmouseover函数，再写一个onmouseout来实现，虽然麻烦了一点，是不是也可以呢（正在思考写法），