<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>遮罩效果实现</
title>
<
style>
*{
margin:
0;
padding:
0;
}
.first{
width:
200
px;
height:
200
px;
border:
2
px
solid
red;
}
.second{
width:
150
px;
height:
150
px;
border:
2
px
solid
green;
position:
relative;
}
.second
div{
width:
100
px;
height:
100
px;
background:
yellow;
}
.second
p{
width:
100
px;
height:
100
px;
background-color:
rgba(
0,
0,
0,
0.6);
position:
absolute;
top:
0;
left:
0;
display:
none;
color:
#fff;
}
</
style>
</
head>
<
body>
<
div
class=
"first">
<
div
class=
"second">
<
div>我是正常显示的内容</
div>
<
p
id=
"obj">我是遮罩</
p>
</
div>
</
div>
<
script>
var second
=document.
getElementsByClassName(
"second")[
0];
var obj
=document.
getElementById(
"obj");
second.
onmouseover
=
function(){
obj.style.display
=
"block";
}
second.
onmouseout
=
function(){
obj.style.display
=
"none";
}
</
script>
</
body>
</
html>