CSS伪元素选择器使用场景示例：鼠标经过时加上遮罩层

听海边涛声

已于 2024-08-28 18:24:47 修改

阅读量339

点赞数 1

文章标签： css 前端

于 2024-08-28 18:23:55 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/141647115

版权

要实现的效果：

开始显示：
在这里插入图片描述

当鼠标经过时，显示遮罩层：
在这里插入图片描述

下面是用伪元素选择器实现遮罩层：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      position: relative;
      width: 390px;
      height: 210px;
      background-color: pink;
      margin: 30px auto;
    }

    .container img {
      width: 100%;
      height: 100%;
    }

    .container::before {
      content: '';
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
    }

    .container:hover::before {
      display: block;
    }
  </style>
</head>

<body>
  <div class="container">
    <img src="images/longxia.png" alt="">
  </div>
</body>

</html>