html - 即使父div已经具有1.0的透明度，也可以在跨度上延迟1.0的透明度？

我意识到这可能不是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!
}

最佳答案

使用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>

关于html - 即使父div已经具有1.0的透明度，也可以在跨度上延迟1.0的透明度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28847321/