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;
        }