Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

当然，您可以使用CSS动画轻松获得此行为。 2s动态播放时间发生在0.5s不透明度转换之后，因此如果您希望整个事件为2秒，则可以将动画时间更改为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 3

你可以使用transition-delay让它在2s后消失：

.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

3 个答案: