1、给每个li绑定鼠标移入事件
2、在鼠标移入的时候,获取当前移入项的内容,然后赋值给一个变量。
3、改变鼠标移入项的内容,可参考效果图,实现是第几个。
4、在鼠标移入的时候,改变其字体颜色以及大小
5、鼠标移出时,恢复原来的状态以及内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>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 lis = document.getElementsByTagName('li');
for(let i = 0; i < lis.length; i++){
let text = lis[i].innerText;
lis[i].onmouseover = function(){
this.style.color = '#f00';
this.style.fontSize = '20px';
this.innerText = text + '我是第' + (i+1) + '个';
};
lis[i].onmouseout = function(){
this.style.color = '#000';
this.style.fontSize = '16px';
this.innerText = text;
}
}
</script>
</body>
</html>