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

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