在父级悬停时显示一个跨度，并仅使用CSS延迟隐藏它

我需要在链接悬停时显示

span

，并在2秒后将其隐藏在鼠标上。下面是我所做的代码。这可以使用JS来完成。但是，我需要的是CSS唯一的解决方案

显示跨度的当前速度是完美的。我只需要在2秒钟后把它藏在鼠标上

.hoverBox span{
不透明度：0；
过渡：不透明度0.5s；
}
.悬停框：悬停跨度{
不透明度：1；
}

---

鼠标悬停你好

当然，您可以通过CSS动画轻松获得此行为。

2s

动画播放时间发生在

0.5s

不透明度转换之后，因此如果您希望整个过程为两秒，可以将动画时间更改为

1.5s

.hoverBox span{
不透明度：0；
过渡：不透明度0.5s；
}
.悬停框：悬停跨度{
不透明度：1；
动画：线性；
动画填充模式：向前；/*这将使其仅播放一次*/
}
@关键帧一瞥{
0%{不透明度：1；}
99%{不透明度：1；}
100%{不透明度：0；}
}

---

鼠标悬停Hello

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

.hoverBox span{
不透明度：0；
过渡：不透明度0.5s 1s；
}
.悬停框：悬停跨度{
不透明度：1；
过渡：不透明度0.5s；
}

---

鼠标悬停你好

您可以使用

转换延迟

使其在2秒后消失：

.hoverBox span {
  opacity: 0;  
  transition: opacity 0.5s; // or transition:opacity 0.5s 2s; the 3rd param is the delay.
  transition-delay:2s;
}
.hoverBox:hover span {
  opacity: 1;  
  transition-delay:0s;
}

---

这不是我要找的。它应该在2秒后隐藏在鼠标上。无论如何，感谢您的尝试。@Tushar啊，这是相关的信息：-P在这种情况下，即使是过渡调整也会像Matej的答案一样有效。