关于蒙层实现的不同方法，我们可以用CSS和jQuery两种方法
Jquery方法
首先看一下HTML代码：
`
孤独症儿童行为检查量表（ABC）
已有777人参与
`
css代码：
`.list_images {
position: relative;
width: 1000px;
margin: 0 auto;
text-align: center;
}
.content {
margin-left: 26px;
margin-top:18px;
margin-bottom: 1%;
height: 200px;
width: 30%;
position: relative;
cursor: pointer;
display: inline-block;
box-shadow: 0px 3px 3px 0px rgb(0,0,0,0.05);
}
h3 {
position: relative;
color: #484848;
font-size: 16px;
font-weight: bold;
left: 0px;
}
p {
position: relative;
left: -10px;
color: #aaaaaa;
font-size: 12px;
}
.mask {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
display: none;
background-color: rgba(0, 0, 0, 0.5);
color: #EEEEEE;
font-size: 20px;
}
.mask_title {
font-size:16px;
margin-top: 20%;
text-align: center;
}
.mask_btn {
display: inline-block;
text-decoration: none;
color: #eee;
width: 100px;
height: 28px;
line-height: 28px;
font-size: 14px;
text-align: center;
border-radius: 14px;
background: #5691fe;
list-style: none;
cursor: pointer;
margin-top: 20px;
}
`
jquery代码：
``
### Css方法：
##### 只需要在css样式中再添加.content:hover .mask {display: block;}
##### Css 代码：
`.list_images {
position: relative;
width: 1000px;
margin: 0 auto;
text-align: center;
}
.content {
margin-left: 26px;
margin-top:18px;
margin-bottom: 1%;
height: 200px;
width: 30%;
position: relative;
cursor: pointer;
display: inline-block;
box-shadow: 0px 3px 3px 0px rgb(0,0,0,0.05);
}
h3 {
position: relative;
color: #484848;
font-size: 16px;
font-weight: bold;
left: 0px;
}
p {
position: relative;
left: -10px;
color: #aaaaaa;
font-size: 12px;
}
.mask {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
display: none;
background-color: rgba(0, 0, 0, 0.5);
color: #EEEEEE;
font-size: 20px;
}
.mask_title {
font-size:16px;
margin-top: 20%;
text-align: center;
}
.mask_btn {
display: inline-block;
text-decoration: none;
color: #eee;
width: 100px;
height: 28px;
line-height: 28px;
font-size: 14px;
text-align: center;
border-radius: 14px;
background: #5691fe;
list-style: none;
cursor: pointer;
margin-top: 20px;
}
.content:hover .mask {display: block;}`
#### 效果图
***----------------------------------------------------------------------------------------------------***
