显示父母悬停的范围并仅使用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>
答
您可以添加第三个参数过渡
.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>
答
当然,你可以用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>
答
您可以使用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;
}
我不认为它与只是作为我们不能把逻辑的CSS CSS是可行的。 – Lekhnath