1.如图所示开始是一片浅灰色的背景色，鼠标滑过的时候图片一片一片的显示出来。看源码看不懂了求大神给解析一下，代码很短
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for的图片生成应用</title>
<style>
#picture {
height: 600px;
width: 513px;
position: relative;
display: block;
overflow: hidden;
}
#cover {
position: absolute;
height: 600px;
width: 520px;
top: 0;
left: 0;
display: block;
background: transparent;
font-size: 0;
}
p {
display: inline-block;
height: 50px;
width: 50px;
border: 1px solid #eee;
background: #eee;
margin: 0;
}
</style>
<script>
window.onload = function(){
var oCover = document.getElementById('cover'),
str = '',
bits = document.getElementsByTagName('p');
for (var i=0; i<200; i++) {
str += '<p></p>';
}
oCover.innerHTML = str;
for (var i=0; i<304; i++) {
bits[i].onmouseover = function(){
this.style.background = 'transparent';
}
}
}
</script>
</head>
<body>
<section id="picture">
<img src="2-img/pic.jpg">
<section id="cover"></section>
</section>
</body>
</html>为什么创建200个p，却for(i=0;i<304???
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
其实我比较好奇 为什么 bits是有值的…
明明getElementsByTagName的时候，innerHTML还没有赋值啊！！
至于304可能只是一个恶趣味，在浏览器里bits里只有200个元素。
写 200 就可以呀