在父母悬停时显示跨度,并仅使用CSS隐藏延迟

Question

我需要显示span链接悬停并在2秒后将其隐藏在mouseout上.以下是我所做的代码.这可以使用JS完成.但是,我只需要CSS解决方案.

显示跨度的当前速度是完美的.我只需要在2秒后将它隐藏在mouseout上.

.hoverBox span {
  opacity: 0;  
  transition: opacity 0.5s;
}
.hoverBox:hover span {
  opacity: 1;  
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

Answer 1

您可以将第三个参数添加到转换

.hoverBox span {
  opacity: 0;  
  transition: opacity 0.5s 1s;
}
.hoverBox:hover span {
  opacity: 1;  
  transition: opacity 0.5s;
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>