多张图片的过渡延迟CSS

Question

我想在CSS中添加 transition-delay，但是无论我在哪里添加都没有效果。

我的CSS代码如下:

    .imageBox {
      position: relative;
      float: left;
      transition-delay: 3s;
    }

    .imageBox .hoverImg {
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .imageBox:hover .hoverImg {
      display: block;
    }

我的HTML代码是：

    <div style="float:left">
      <div class="imageBox">
          <img src="https://cdn.discordapp.com/attachments/732623682576580719/1010327699098714282/unknown.png" height="300px" width="300px">
        <div class="hoverImg">
          <img src="https://cdn.discordapp.com/attachments/732623682576580719/1011368277613760583/Me_Purple.png">
        </div>
      </div>
    </div>

我的过渡延迟和缓动应该放在哪里？谢谢！

- beepbeepboop

---

延迟只是过渡元素中的一个元素。你需要添加其他的元素。 - Mister Jojo

Answer 1

过渡属性在 "display" 上不起作用。 尝试这样做：

    .imageBox {
      position: relative;
      float: left;
    }

    .imageBox .hoverImg {
      position: absolute;
      left: 0;
      top: 0;
      opacity:0;
      transition:1s;
      transition-delay: 3s;
    }

    .imageBox:hover .hoverImg {
      opacity:1;
    }

这并不会使div消失，而是让它变得看不见。这种方法不适用于所有场景，但在此处应该有效。

- Astw41