移除光标后保持Transition效果答案

【问题标题】：Keep Transition effect after removing the cursor移除光标后保持Transition效果
【发布时间】：2013-02-05 10:06:01
【问题描述】：

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

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

我之所以需要它transparent 是为了在主 div 下显示一个绝对定位的 div，换句话说，当我将鼠标悬停在父 div 上时，我需要显示子 div。

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

因为我需要一个纯 CSS 解决方案（没有 JS/JQuery），所以我进入了 CSS3 过渡。

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

这是fiddle (Firefox)。

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

我考虑过使用animation 来做这件事，因为我可以通过给它一个临时持续时间来保持透明，例如fake。

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

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

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

【问题讨论】：

标签： html css animation css-transitions

【解决方案1】：

查看transition-delay 属性。

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

Fiddle

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

【讨论】：

请允许我说，我爱你。

【解决方案2】：

使用下面的代码从红色过渡到透明。并将“对象”更改为您的对象的类

.object {

background-color: red;

-webkit-transition:background-color 1s linear;  /*   for webkit supported browsers   */
-moz-transition:background-color 1s linear;  /*   for old mozilla browsers   */
-o-transition:background-color 1s linear;  /*   for opera browsers   */
transition:background-color 1s linear;  /*   for css3 supported browsers   */
}

.object:hover {
background-color: transparent;

}

【讨论】：

【解决方案3】：

我认为纯 CSS 不可能。作为一种折衷方案，您可以使用 JavaScript 向元素添加一个类，然后使用 CSS 处理所有视觉效果。

http://jsfiddle.net/ZvcgP/1/

HTML

<div class="effect">Hover me</div>

CSS

.effect {
    background-color: red;

    -webkit-transition:background 1s;
    transition:background 1s;
}

.effect.anim-done {
    background-color: transparent;
}

$('.effect').mouseenter(function () {
    $(this).addClass('anim-done');
});

【讨论】：