在这里我们将完成一个当鼠标经过某个图片时，图片添加遮罩层的效果。为了方便起见，小熊这里只写了两个盒子。
实现思路是：将遮罩的盒子覆盖在图片上，遮罩的盒子不占有位置，所以用绝对定位 和 display 配合使用。当鼠标经过时，让遮罩的盒子显示display:block，鼠标离开时，让遮罩的盒子隐藏display:none。在这里用两种方法来实现效果。
（1）常规法，给每个图片前面加一个同样大小的盒子通过设置属性作为遮罩层通过绝对定位分别加到每个图片上。
代码如下所示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.college {position: relative;width: 512px;height: 256px;margin: 20px auto;}.college img {width: 100%;height: 100%;}.mask {display:none;position: absolute;top:0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) }.college:hover .mask{display: block;}</style></head><body><div class='college'><div class="mask"></div><img src="college.jpg" alt=""></div><div class='college'><div class="mask"></div><img src="college1.jpg" alt=""></div></body></html>
实现效果为：
（2）通过伪元素选择器法。就是通过before在图片盒子前面创建遮罩层的图片。
实现代码为：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.college {position: relative;float: left;width: 512px;height: 256px;margin: 20px 20px;}.college img {width: 100%;height: 100%;}.college::before{content:'';display: none;width: 100%;height: 100%;position: absolute;left: 0;left: 0;background-color: rgba(0, 0, 0, .4) ;}.college:hover::before {/* 当鼠标经过了college这个盒子，就让里面before遮罩层显示出来 */display: block;}</style></head><body><div class='college'><img src="college.jpg" alt=""></div><div class='college'><img src="college1.jpg" alt=""></div></body></html>
实现效果为：
为了区别两种效果，我将方法二实现的效果横排显示，可以发现，两种方法都可以实现遮罩层的效果，但是再具体运用中，方案二更加方便，不需要在额外给每个图片添加盒子，更推荐第二种方案。
