#css# 【四】实现鼠标移入图片显示遮罩层

css 实现鼠标移入图片显示遮罩层

实现鼠标移入图片显示遮罩层的方法有很多
比如动画库，动画库的使用可看
#前端开发001之Animate动画库的安装及详细用法

不过动画库使用起来还是有点麻烦，所以本篇分享一个原生的简洁写法

三步解决：
第一步：设置定位（子绝父相）
第二步：设置子盒子背景的透明度（鼠标移入前）
第三步：设置鼠标移入时，盒子的样式变化（鼠标移入时）

html:

 <div class="learn-top-sub">
      <img :src="item.src" alt="">
      <div class="mask-img"></div>
 </div>
 

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表示半透明