css 鼠标划过显示遮罩

1.html结构 用一个父元素div把原有的和要遮罩的包起来

<div class="content">

        <div class="touxiang">
           这是头像
        </div>
        <div class="genghuan">
            遮罩层
        </div>

    </div>

2.写样式

注意点：父元素的大小跟头像(这里指鼠标滑过之前的元素)大小一样

给遮罩层设置属性opacity: 0;让他不显示

.content{//父元素
            width: 100px;
            height: 100px;
            position: relative;
        }
.touxiang{ //头像
            width: 100px;
            height: 100px;
            background: blue;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
        }
.genghuan{ //遮罩层
            width: 100px;
            height: 100px;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            background: rgba(0, 0, 0, .5);
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;//透明度为0 不显示遮罩层
        }

3.划过显示

重点来了！！！

给父元素设置划过 然后父元素划过的时候遮罩层显示

遮罩层透明度为 1 ，这样遮罩层就显示出来啦

 .content:hover .genghuan{
            opacity: 1;
        }