css - 鼠标悬停延迟，显示子 div

Question

使用 CSS 过渡，我想在“激活器”类中添加 0.5 秒的悬停延迟。在这 0.5 秒之后，它应该将“content-l1”类从 display:none 更改为 display:block

我已尝试使用此代码，但根本不起作用。

.content-l1 {
  transition: 0s display;
}

.activator:hover>.content-l1 {
  display: block;
  transition-delay: 0.5s;
}

<div class="activator">

  <div class="content-l1"> // initially: display:none whatever content here
  </div>

</div>

Answer 1

display 不做过渡动画。你可以使用 opacity

.content-l1 {
  transition: 0s;
  opacity: 0;
}

.activator:hover>.content-l1 {
  opacity: 1;
  transition-delay: 0.5s;
}

<div class="activator">
  fjhfjh
  <div class="content-l1">
    afsfas
  </div>
</div>

但是 block 'content-l1'发生了。我们需要使用 position

.activator {
  position: relative;
}

.content-l1 {
  position: absolute;
  background-color: white;
  padding: .4em;
  border: 1px solid black;
  transition: 0s;
  opacity: 0;
}

.activator:hover>.content-l1 {
  opacity: 1;
  transition-delay: 0.5s;
}

<div class="activator">
  fjhfjh
  <div class="content-l1">
    afsfas
  </div>
</div>
qwewertrtw