给div套一层遮罩层，并实现鼠标划过时遮罩层按块消失（div盒子上方套黑色遮罩层的显示消失）

实现如下效果，当鼠标在图片上移动时逐渐将图片清晰显示出来

在这里插入图片描述
真是找了挺多资料才得以解决，主要是出现了错误，寻找错误原因十分费头发

方法一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		*{
			padding:0px;
			margin: 0px;
		}
		div{
			width: 51px;
			height: 51px;
			float:right;
			/*border: 1px solid #fff;*/
		}
		#d{
			width: 510px;
			height: 510px;
			float: none;
			margin: 0 auto;
			
			/*border:1px solid;*/
			border: none;
			background: url(shatan.jpg);
		}
	</style>
</head>
<body>
	<div id="d" >
		
	</div>
	<script type="text/javascript">
		var a=document.getElementById("d");
		var c="";

		for(var i=0;i<10;i++){
			c+="<div id=\"d"+i+"\" style=\" width\: 510px ;height\: 51px; \">";
			for(var j=0;j<10;j++){
				c=c+"<div id=\""+(i*10+j)+"\" style=\" opacity\:0.8 ;background\:#000 \" ></div>";
			}
			
			c+="</div>";
		}
		// alert(c);
		a.innerHTML=c;

		for(var i=0;i<100;i++){
			var d=document.getElementById(i);
			d.onmouseover=function(){
				
					this.style.opacity="0";
			}
		}
	</script>
</body>
</html>

?安全无错误型

方法二

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style type="text/css">
	img{
		z-index: -1;
	}
	/*div#box{
		box-sizing:border-box;
width:10%;
height: 10%;
border:1px solid rgba(255,255,255,0.3);
float:left;
	}*/
	#black{
		width: 510px;
		height: 510px;
		 position :  absolute ;   
		 z-index : 1001 ;  
		 opacity : .80 ;
		 box-sizing: border-box;  
		 border: 1px solid white;

	}
	/*#box{
		background-color: rgba(0,0,0,0.8);
	}*/
	#ims{
		width: 510px;
		height: 510px;
	}
</style>
<body>
	<div id="black">
		
	</div>
	<div id="ims">
		<img src="images/shatan.jpg">
	</div>
	<script type="text/javascript">
		//var black=document.getElementById('black');
		
		//for (var i = 0; i < 100; i++) {
			//black.innerHTML+='<div id="box"></div>'
		//}
		//var box=document.getElementById('box');
		//box.οnmοuseοver= function() {
			//this.style.opacity="0";
		//}


		//正确
		var black=document.getElementById('black');
		
		for (var i = 0; i < 100; i++) {
			black.innerHTML+='<div id="'+i+'" style="background-color: rgba(0,0,0,0.8);box-sizing:border-box;width:10%;height: 10%;border:1px solid rgba(255,255,255,0.3);float:left;"></div>'
		}
		for(var i=0;i<100;i++){
			var d=document.getElementById(i);
			d.onmouseover=function(){
				
					this.style.opacity="0";
			}
		}
	</script>

	
</body>
</html>

?秃头有错误改正型，注释为错误（只隐藏第一个小方格）

使用 box-sizing: border-box; 样式时，要在父盒子中使用，子盒子（显示样式的div）中注明分成的份数，用百分号（width:10%;height: 10%;及分成100份）

原文链接：https://blog.csdn.net/weixin_44242212/article/details/109210788