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

Question

我需要在悬停 link 时显示 span 并在鼠标移开 2 秒后将其隐藏。下面是我所做的代码。这可以使用 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

当然，您可以使用 CSS 动画轻松实现此行为。 2s 动画播放时间发生在 0.5s 不透明度过渡之后，因此如果您希望整个播放时间为两秒，您可以将动画时间更改为 1.5s.

.hoverBox span {
    opacity: 0;  
    transition: opacity 0.5s;
}
.hoverBox:hover span {
    opacity: 1;  
    animation: glimpse 2s linear;
    animation-fill-mode: forwards; /* This is to make it only play once */
}
@keyframes glimpse {
    0% { opacity: 1; }
    99% { opacity: 1; }
    100% { opacity: 0; }
}

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

Answer 2

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

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

Answer 3

你可以使用transition-delay让它在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;
}

https://jsfiddle.net/bk9vnubx/

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

Show a span on hover of parent and hide it with delay using only CSS

css

css-transitions

css-transforms