<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
li{
width: 100px;
height: 100px;
background: red;
padding-top: 20px;
float: left;
margin-left: 30px;
}
span{
width: 100px;
height: 100px;
background: blue;
display: none;
}
</style>
<body>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
<script>
// 效果描述: 鼠标滑入每一个li, 将li中的span标签显示出来
var lis = document.getElementsByTagName('li');
// 每个li添加滑入事件
for(var i = 0; i < lis.length; i++){
lis[i].onmouseenter = function(){
console.log(i); // 循环结束的条件
console.log(this);
// 获取当前li中的span标签
var span = this.getElementsByTagName('span')[0];
console.log(span);
span.style.display = 'block';
}
lis[i].onmouseleave = function(){
console.log(i); // 循环结束的条件
console.log(this);
// 获取当前li中的span标签
var span = this.getElementsByTagName('span')[0];
console.log(span);
span.style.display = 'none';
}
}
</script>
</body>
</html>