给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
;
}
#d
{
width
: 510px
;
height
: 510px
;
float
: none
;
margin
: 0 auto
;
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>";
}
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;
}
#black
{
width
: 510px
;
height
: 510px
;
position
: absolute
;
z
-index
: 1001 ;
opacity
: .80 ;
box
-sizing
: border
-box
;
border
: 1px solid white
;
}
#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="'+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份）
