1.     <style>
    2.         .tudou {
    3.             position: relative;
    4.             width: 444px;
    5.             height: 320px;
    6.             background-color: pink;
    7.             margin: 30px auto;
    8.         }
    10.         .tudou img {
    11.             width: 100%;
    12.             height: 100%;
    13.         }
    15.         .tudou::before {
    16.             content: '';
    17.             /* 隐藏遮罩层 */
    18.             display: none;
    19.             position: absolute;
    20.             top: 0;
    21.             left: 0;
    22.             width: 100%;
    23.             height: 100%;
    24.             background: rgba(0, 0, 0, .4) url(../伪元素选择器/arr.png) no-repeat center;
    25.         }
    27.         /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
    28.         .tudou:hover::before {
    29.             /* 而是显示元素 */
    30.             display: block;
    31.         }
    32.     </style>
    33. </head>
    35. <body>
    36.     <div class="tudou">
    37.         <img src="../伪元素选择器/girl.jpeg" alt="">
    38.     </div>
    39.     <div class="tudou">
    40.         <img src="../伪元素选择器/girl.jpeg" alt="">
    41.     </div>
    42.     <div class="tudou">
    43.         <img src="../伪元素选择器/girl.jpeg" alt="">
    44.     </div>
    45.     <div class="tudou">
    46.         <img src="../伪元素选择器/girl.jpeg" alt="">
    47.     </div>
    48. </body>

    image.png