鼠标移入显示遮罩层

css鼠标移入元素在上方显示遮罩层到底是怎么做的呢？今天就由我来为大家解答这个问题，在这里我用两种方法来写一下，有需要的小伙伴记得收藏，以备不时之需…

第一种方法：

第一种方法就是给需要遮罩层的元素同级再添加一个元素来达到这样的效果，让我们看一下代码怎么写：

html代码：

<div class="box">
        <a href="http://materials.windfish.cn/jxy1-video.mp4" target="_blank">
            <div class="box-y"></div>
            <img src="images/banner.jpg" alt="">
        </a>
</div>

css代码：

*{
    margin: 0;
    padding: 0;
    bottom: 0;
}
.box{
    position: relative;
    width: 1000px;
    height: 590px;
    margin: 120px auto;
}
.box:hover .box-y{
    display: block;
}
.box img{
    width: 100%;
    height: 100%;
}
.box .box-y{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4) url(../images/bf.png) no-repeat center;
    display: none;
}

以上就是第一种方法，接下来让我们看看第二种方法

第二种方法：

第二种方法本质和第一种方法一致，都是添加新的元素，区别就是第二种方法采用css3中的伪元素进行添加，让我们看看代码怎么写：

html代码：

<div class="box">
        <a href="http://materials.windfish.cn/jxy1-video.mp4" target="_blank">
            <img src="images/banner.jpg" alt="">
        </a>
</div>

注：对比第一种少了class为box-y的div。

css代码：

*{
    margin: 0;
    padding: 0;
    bottom: 0;
}
.box{
    position: relative;
    width: 1000px;
    height: 590px;
    margin: 120px auto;
}
.box a:hover::before{
    display: block;
}
.box img{
    width: 100%;
    height: 100%;
}
/* 添加伪元素 */
.box a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4) url(../images/bf.png) no-repeat center;
    display: none;
}

注：添加的伪元素将不会在DOM中出现的，不过需要注意的是第二种方法(添加伪元素)需要IE9及以上浏览器使用，因为这些都属于css3的新属性，浏览器版本过低将不兼容。

浏览器效果展示：

鼠标移入前：

鼠标移入后：

注：以上就是关于鼠标移入显示遮罩层的所有代码了，对你有帮助吗(所用图片来源于网络)？