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

Question

我需要将background-colorfrom更改red为transparent.

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

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

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

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

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

这是一个小提琴（Firefox）。

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

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

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

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

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

Answer 1

看看transition-delay物业。

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

小提琴

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

Answer 2

我认为纯 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;
}

JS

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

Answer 3

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

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

}