显示父母悬停的范围并仅使用CSS隐藏延迟

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

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

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

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

来源

2016-07-14 Tushar

我不认为它与只是作为我们不能把逻辑的CSS CSS是可行的。 – Lekhnath

您可以添加第三个参数过渡

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

来源

2016-07-14 13:36:29

当然，你可以用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>

来源

2016-07-14 13:29:34 TylerH

这不是我要找的。 2秒后它应该隐藏在鼠标外面。反正谢谢你的尝试。 – Tushar

@Tushar啊，那是相关的信息:-P在这种情况下，即使是过渡调整也会像Matej的回答一样起作用。 – TylerH

您可以使用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/

来源

2016-07-14 13:39:40 pawel

显示父母悬停的范围并仅使用CSS隐藏延迟

回答

相关问题