js遍历li并动态更换下级节点的样式

在此之前我在js遇到标题这种问题时候常遇到一个难题，如下图代码所示

这里是html代码

---

<ul>        <li class="li">321            <ul class="sec_list">                <li>123</li>                <li>123</li>            </ul>        </li>        <li class="li">321            <ul class="sec_list">                <li>123</li>                <li>123</li>            </ul>        </li>        <li class="li">321            <ul class="sec_list">                <li>123</li>                <li>123</li>            </ul>        </li></ul>

---

下面是错误的js代码

var li = document.getElementsByClassName('li');    for(var i=0;i<li.length;i++){        li[i].onmouseover=function(){            console.log(i);            document.getElementsByClassName('sec_list')[i].style.display="block";        }    }    for(var i=0;i<li.length;i++){        li[i].onmouseout=function(){            console.log(i);            document.getElementsByClassName('sec_list')[i].style.display="none";        }    }

在这里，我就有点懵逼了，这个遍历没什么问题呀，可是调试时候i一直是3，还不停地报错，样式没一点变化。在我去了解了一些网上的一些说法，发现了下面这种做法：

var li = document.getElementsByClassName('li');    for(var i=0;i<li.length;i++){        li[i].onmouseover=function(){            console.log(i);            this.getElementsByClassName('sec_list')[0].style.display="block";        }    }    for(var i=0;i<li.length;i++){        li[i].onmouseout=function(){            console.log(i);            this.getElementsByClassName('sec_list')[0].style.display="none";        }    }

hundred percent实现效果，emm有意思，问题的解决办法找到了，但是没怎么理解这个this和之前代码做法的区别，之前的做法错的原因是什么，求助各位大神解答，小编在理解后也会补上知识点~