一、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,遮罩层消失
两种方法的效果如下图
鼠标移上去之前:
鼠标移上去之后: