<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.bg {
background-color: skyblue;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// 1、获取元素,获取的是ul 里的所有的小li
var lis = document.querySelector('ul').querySelectorAll('li');
// 2、利用循环绑定注册事件
for (var i = 0 ; i < lis.length;i++){
// 3、 鼠标经过事件 onmouseover
lis[i].onmouseover = function(){
this.className = 'bg';
}
// 4、 鼠标离开事件 onmouseout
lis[i].onmouseout = function(){
this.className = ''; // 此处是空字符串,不能加空格,如果添加了空格会导致颜色恢复失败
}
}
</script>
</body>
</html>
08-19
216
08-27
479
08-23
855
08-24
229