css__0">css 实现鼠标移入图片显示遮罩层
实现鼠标移入图片显示遮罩层的方法有很多
比如动画库,动画库的使用可看
#前端开发001之Animate动画库的安装及详细用法
不过动画库使用起来还是有点麻烦,所以本篇分享一个原生的简洁写法
三步解决:
第一步:设置定位(子绝父相)
第二步:设置子盒子背景的透明度(鼠标移入前)
第三步:设置鼠标移入时,盒子的样式变化(鼠标移入时)
html:
css">
<div class="learn-top-sub">
<img :src="item.src" alt="">
<div class="mask-img"></div>
</div>
css:
css">
父盒子:
learn-top-sub {
position: relative; //父盒子设置相对定位
width: 311px;
height: 175px;
border-radius: 5px 5px 0 0; //边框圆角
}
子盒子(装有图片)
learn-top-sub img {
width: 100%;
height: 100%;
background-color: #F9B008;
}
子盒子(装有遮罩层)
.mask-img {
position: absolute; //子盒子设置绝对定位
width: 100%; // 宽度高度设置与父盒子一样
height: 100%;
bottom: 0; //设置底边为0
background: rgba(101, 101, 101, 0.6); //设置透明度 ,改最后一个数值,0-1
color: #ffffff;
opacity: 0; // 设置为完全透明,相当于先把这个盒子隐藏起来
}
子盒子的hover移入事件
learn-top-sub:hover .mask-img {
opacity: 1; //设置为完全不透明,相当于把这个盒子显示出来
cursor: default; //默认正常鼠标指针
}
一些知识点:
//.learn-top div:hover.mask-img :
这串代码的意思是,点击learn-top-sub 这个盒子里面的类名为mask-img,会变换成另一种样式
opacity
//1. 作用:设置元素的透明背景
//2. 取值
(1) 取值范围0~1
(2) 0表示完全透明,1表示完全不透明,0.5表示半透明