<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
color:#000;
font-size:12px;
}
.hover{
color:#f00;
font-size:14px;
}
</style>
</head>
<body>
<ul>
<li class="hover">HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jquery</li>
<li>HTML5</li>
<li>CSS3</li>
<li>ES6</li>
</ul>
<script type="text/javascript">
//var liCollection= document.getElementsByTagName("li");
//for(var i = 0; i < liCollection.length; i++){
// var li = liCollection[i];
// (function(li){
// li.onmouseover = function(){
// li.className="hover";
// };
// li.onmouseleave = function(){
// li.className="";
// };
// })(li);
//}
var liCollection= document.getElementsByTagName("li");
for(var i = 0; i < liCollection.length; i++){
let li = liCollection[i];
//(function(li){
li.onmouseover = function(){
li.className="hover";
};
li.onmouseleave = function(){
li.className="";
};
//})(li);
}
</script>
</body>
</html>