在反应项目之前不起作用但在工作之后答案

【问题标题】：In react project before does not work but after work在反应项目之前不起作用但在工作之后
【发布时间】：2022-01-04 12:33:13
【问题描述】：

当悬停在效果背景之前看不到。但在效果后台工作之后。我尝试不同的方式。我也使用 z-index，但它也不起作用。

   .img-hover {
  position: relative;
  overflow: hidden;
}
.img-hover img {
  transition: 0.4s ease-in-out;
  cursor: pointer;
}
.img-hover::after {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(17, 17, 17, 0.294);
      content: "";
      transition: all ease-in-out 0.7s;
      cursor: pointer;
    }
    .img-hover:hover::after {
      top: 0;
      left: 0;
      width: 0;
      height: 0;
    }
    .img-hover::before {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(17, 17, 17, 0.294);
      content: "";
      transition: all ease-in-out 0.7s;
    }
    .img-hover:hover::before {
      bottom: 0;
      right: 0;
      width: 0;
      height: 0;
    }

但代码不起作用。我试图找出答案，但是

【问题讨论】：

请加jsx或者html代码，会有帮助的

标签： css reactjs responsive-design

【解决方案1】：

我已经用没有 src 但宽度和高度以及背景粉红色替换了 img，并且还减慢了在伪元素之前和之后的过渡到 7s。

您会看到之前和之后一样有效 - 之前将覆盖物缩小到右下角，之后将其缩小到左上角。

即对于伪元素，我看不到什么不起作用。

但是，请注意，为实际 img 元素指定了一个过渡，但在悬停时实际 img 上没有任何变化，因此实际 img 没有任何变化，只有覆盖的伪元素发生。

<style>
   .img-hover {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.img-hover img {
  transition: 0.4wis ease-in-out;
  cursor: pointer;
  width: 100px;
  height: 100px;
  background: pink;
}
.img-hover::after {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(17, 17, 17, 0.294);
      content: "";
      transition: all ease-in-out 7s;
      cursor: pointer;
    }
    .img-hover:hover::after {
      top: 0;
      left: 0;
      width: 0;
      height: 0;
    }
    .img-hover::before {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(17, 17, 17, 0.294);
      content: "";
      transition: all ease-in-out 7s;
    }
    .img-hover:hover::before {
      bottom: 0;
      right: 0;
      width: 0;
      height: 0;
    }
    </style>
    <div class="img-hover">
    <img src="">
    </div>

【讨论】：