Question

我意识到这可能没有javascript以外的解决方案，但也许有人可以想出用纯css做到这一点的方法。

我有一个父div和孩子：

<div class="parent">
    Text Text Text Text <span class = "delay">TEXT</span></div>
</div>

CSS

.parent{
    opacity: 0.0;
    -webkit-transition:all;
    -moz-transition:all;
    -o-transition: all;
    transition: all;
    transition-duration: .5s;
}
.delay{
    -webkit-transition:all;
    -moz-transition:all;
    -o-transition: all;
    transition: all;
    transition-duration: 1s; //make this one take .5 seconds longer to show!
}

Answer 1

使用transition-delay：

transition-delay: 0.5s

示例：

.parent,
.parent .child {
    opacity: 0;
    transition: 0.5s opacity linear;
}
.parent .child {
    transition-delay: 0.5s;
}
body:hover .parent,
body:hover .parent .child {
    opacity: 1;
}
/* Extra to show you where to hover over */
body {
    border: 1px solid #666;
}
body:before {
    content: 'Hover here';
}

<div class="parent">
    Text Text Text Text <span class="child">TEXT</span>
</div>

即使父div已经有1.0不透明度，延迟1.0不透明度的跨度？

1 个答案: