关于css:仿土豆网显示隐藏遮罩案例

50次阅读

共计 1038 个字符，预计需要花费 3 分钟才能阅读完成。

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> 仿土豆网显示暗藏遮罩案例 </title>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .tudou {
    position: relative;
    width: 444px;
    height: 320px;
    background-color: pink;
    margin: 100px auto;
  }
  .tudou > img {
    width: 100%;
    height: 100%;
  }
  .tudou .mask {
    /* 暗藏遮罩层 */
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4) url(./images/arr.png) no-repeat center
      center;
  }
  /* 当咱们鼠标通过了 土豆这个盒子，就让外面的遮罩层显示进去 */
  .tudou:hover .mask {
    /* 显示元素 */
    display: block;
  }
</style>

</head>
<body>

<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>
<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>
<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>
<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>
<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>

</body>
</html>

正文完