DIV鼠标移入背景变暗，并显示播放按钮

前端（从入门到入土）

于 2024-04-06 16:19:15 发布

阅读量262

点赞数 3

文章标签：前端 javascript 开发语言 css3

本文链接：https://blog.csdn.net/qq_45600228/article/details/137431193

版权

效果图

1.创建DIV

          <div class="entry" @click="handlePlay">
            <img class="img1" src="../../assets/HomePage/icon_img77.png" alt="">
            <img class="img2" src="../../assets/HomePage/icon_img78.png" alt="">
            <img class="img3" src="../../assets/HomePage/icon_img79.jpg" alt="">
            <img class="img4" src="../../assets/HomePage/icon_img80.png" alt="">
          </div>

2.设置CSS样式

      .entry {
        flex: 1;
        background: #ccc;
        margin-left: 2rem;
        position: relative;
        border-radius: 0.2rem;
        box-shadow: 0 0.2rem 0.5rem #ccc;
        height: 23.9375rem;
        .img1 {
          position: absolute;
          width: 8.625rem;
          top: -4rem;
          right: -4rem;
          z-index: 1;
        }
        .img2 {
          position: absolute;
          width: 20.5rem;
          top: 2rem;
          right: -14rem;
          z-index: 1;
        }
        .img3 {
          width: 100%;
          height: 100%;
          border-radius: 0.2rem;
          // opacity: 0.5;
          // filter: grayscale(50%);
        }
        .img4 {
          display: none;
          position: absolute;
          top: 9.5rem;
          left: 18.5rem;
          width: 4.5rem;
          z-index: 1;
          cursor: pointer;
        }
      }