一、div布局+css
1.html代码
<div class="a" id="a">
<img src="img/page3_img1.jpg">
<!--遮罩层开始-->
<div class="b" id="b">
<p>遮罩层</p>
</div>
<!--遮罩层结束-->
</div>
2.css样式
.a{
width: 300px;
height: 218px;
position: relative;
}
.b{
width: 300px;
height: 218px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(101, 101, 101, 0.6);
opacity: 0;
transition: all 1s;
}
.a:hover .b{
opacity: 1;
transition: all 1s;
}
(1)外面的盒子用相对定位,里面的盒子用绝对定位,使之完全重合
(2)background-color的第四个参数是设背景颜色的透明度
(3)在鼠标没移上去之前,整个遮罩层的盒子透明度为0(不可见)
(4)鼠标移上去之后,遮罩层的盒子透明度为1(可见)
(5)transition:all 1s 使之有一个过渡的效果
二、div布局+css+js
1.html代码
<div class="a" id="a">
<img src="img/page3_img1.jpg">
<!--遮罩层开始-->
<div class="b" id="b">
<p>遮罩层</p>
</div>
<!--遮罩层结束-->
</div>
2.css样式
.a{
width: 300px;
height: 218px;
position: relative;
}
.b{
width: 300px;
height: 218px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(101, 101, 101, 0.6);
opacity: 0;
transition: all 1s;
}
3.js代码
var a=document.getElementById('a');
var b=document.getElementById('b');
a.function(){
b.style.opacity='1';
}
a.function(){
b.style.opacity='0';
}
(1).a的div使用了鼠标事件onmouseover:鼠标移上去.b的div的透明度变成1,出现了遮罩层
(2).a的div使用了鼠标事件onmouseout:鼠标移走时.b的div的透明度变成0,遮罩层消失
两种方法的效果如下图
鼠标移上去之前:
鼠标移上去之后: