html - 移除光标后保留Transition效果

Question

我需要将 background-color 从 red 更改为 transparent。

当我将鼠标悬停在一个 div 上时，应该会发生这种变化。

原因是我需要它transparent是这样我可以在主div下显示一个绝对定位的div，换句话说，当我悬停在父div上时，我需要显示子div分区

当我将光标从这个 div 移开时，我不想要 reverse-transition，我希望背景保持透明，我希望蓝色 div 在我移动后始终存在移开光标。

因为我需要一个纯 CSS 解决方案(没有 JS/JQuery)，所以我进入了 CSS3 Transition。

<div id="parent">
     <div id="child">
     </div>
</div>

这是一个 fiddle (火狐)。

#parent
{
     background:red;
     -moz-transition:background 1s;
}
#parent:hover
{
     background:transparent;
}

我考虑过用动画来做到这一点，因为我可以通过给它一个临时持续时间以保持透明来伪造它，例如。

0% {background:red;}
1% {background:transparent;}
100% {background:transparent;}

但是当我将光标移开时动画将停止。

注意:这可能听起来很可笑或愚蠢，但我的意图远不止于此，这只是一个小例子。

Answer 1

看看 transition-delay属性(property)。

#parent { transition-delay:999999s; }
#parent:hover { transition-delay:0s; }

Fiddle

这样，悬停动画将立即发生(0s)，而过渡到初始状态只会在 277 小时后不离开页面时发生。如有必要，您可以进一步增加值，但我相信这个值对于真实世界的页面来说已经足够了。 =]