Question

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

当我将鼠标悬停在div上时，会发生此更改。

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

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

由于我需要一个PURE CSS解决方案（No JS / JQuery），我进入了CSS3 Transition。

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

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

注意：这可能听起来很荒谬或愚蠢，但我的意图比这更大，这只是一个小例子。

Answer 1

查看transition-delay属性。

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

Fiddle

这样，悬停动画将立即发生（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;

}

删除光标后保持过渡效果

3 个答案: