HTML与CSS————简单的鼠标悬浮遮罩（完整源码）

最新推荐文章于 2022-09-23 14:11:11 发布

命中不缺狗——

最新推荐文章于 2022-09-23 14:11:11 发布

阅读量1k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_62858590/article/details/122220830

版权

今天，我们来学习简单的鼠标悬浮（就是将鼠标移动到指定元素上面）遮罩，具体效果如下

HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>命中不缺狗--</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="HTML与CSS————简单的鼠标悬浮遮罩.css">
    </head>
    <body>
        <!-- 总层 -->
        <div class="box">
            <!-- 图片层 -->
            <div class="picture">   
                
            </div>
            <!-- 遮罩层 -->
            <div class="mask">
                <p>命中不缺狗--</p>
            </div>
        </div>
    </body>
</html>

CSS代码如下：

.box {
  position: relative;
  width: 300px;
  height: 300px;
}
.picture {
  width: 100%;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
  background-color: rgb(231, 229, 107);
}
.mask {
  position: absolute;
  //遮罩的渐变颜色
  background-image: linear-gradient(rgba(255, 0, 0, 0), rgb(17, 0, 255, 0.5));
  color: #ffffff;
  opacity: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 300px;
  /* border-radius: 10px; */
  pointer-events: none;
}
.box:hover .mask {
  opacity: 1;
}