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

我需要在链接悬停时显示跨度,并在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>

解决方法

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

.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>