鼠标悬停显示遮罩层

最新推荐文章于 2022-10-25 10:02:03 发布

才疏学浅888

最新推荐文章于 2022-10-25 10:02:03 发布

阅读量425

点赞数 1

CC 4.0 BY-SA版权

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/m0_59849011/article/details/121273307

本文介绍了如何通过HTML和CSS技术，在鼠标悬停时触发一个遮罩层的显示效果。首先，HTML部分创建了基本的结构，然后CSS部分定义了样式，特别是针对悬停状态下的遮罩层展示进行设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分:

css部分:

  .smallbox {
            width: 100%;
            .card {
              position: relative;
              top: 0;
              left: 0;
              width: 224px;
              height: 302px;
              margin-right: 70px;
              overflow: hidden;

              img {
                width: 224px;
                height: 302px;
                margin-right: 70px;
              }
              .message {
                position: absolute;
                // bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                transition: all 1s;
                transform: translateY(100%);
                width: 224px;
                height: 302px;
                img {
                  width: 224px;
                  height: 302px;
                  margin-right: 70px;
                }
              }
              &:hover .message {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                transform: translateY(-0px);
              }
            }
          }