Question

使用CSS过渡，我想在类“激活器”中添加0.5秒的延迟。在这些0.5之后，它应该从display：none更改“content-l1”类来显示：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>

但阻止'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

鼠标悬停延迟，显示一个子div

1 个答案: