Question

我想在某些盒子上创建一个效果。在鼠标上必须出现叠加，并在一秒钟之后出现标题，然后是字幕。到目前为止一切顺利，但我希望当我移除鼠标时，元素将按照它们输入的相反顺序消失。我该怎么做？

.overlayPortfolio {
    background-color: rgba(255,255,255,0.8);
    opacity: 0;
    padding: 3em;
    position: absolute;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.overlayPortfolio h1 {
    color: #292929;
    opacity: 0;
    text-align: left;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.sectionSubtitle {
    color: #292929;
    display: block;
    font-size: 0.875em;
    font-weight: 300;
    margin-top: 0.25em;
    text-align: left;
    -webkit-transition: all .9s ease-out;
    -moz-transition: all .9s ease-out;
    -o-transition: all .9s ease-out;
    transition: all .9s ease-out;
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

正如您所见，叠加层在0.3秒后出现，然后是标题，最后一个是副标题。所有鼠标都可以，但鼠标输出同时消失:(

出了什么问题？

Answer 1

由于我没有使用您使用的HTML，我继续编写了一个更简单的例子：

JSFiddle

html：

<div id="hoverable">
    <div id="e1"></div>
    <div id="e2"></div>
    <div id="e3"></div>
</div>

首先我们编写初始CSS：

#hoverable {
    height:60px;
}
#hoverable * {
    width:30px;
    height:30px;
    float:left;
    background:black;
    transition: margin-top .3s ease-in-out;
}

#hoverable:hover * {
    margin-top:30px;
}

现在所有的盒子都顺利过渡了。

接下来，我们添加延迟：

#hoverable #e2 {
    transition-delay: .3s;
}
#hoverable #e3 {
    transition-delay: .6s;
}

最后，为了反转延迟，我们必须为#hoverable元素悬停时添加单独的样式。

#hoverable:hover #e1 {
    transition-delay: .6s;
}
#hoverable:hover #e3 {
    transition-delay: 0s;
}

这使得当您将鼠标悬停在元素上时，它会使用向内的转换延迟，当您将其悬停时，它将删除该样式，使其使用默认延迟。在这种情况下，由于#e2始终是要移动的第二个元素，因此其延迟始终为.3s。这只是反转#e1和#e3

延迟的问题

此外，您的元素一次全部消失的原因是因为您的元素都在您想要转换的第一个元素的内部。当你的父元素隐藏自己，因为它包含了它们，它们会随之消失。如果他们不是第一个元素的孩子，他们就不会立刻消失。仍然不会是相反的顺序。 =）

作为旁注，有些事情可以让你的css变得更简单。

如果您前往transition page on CanIuse.com，您会发现几乎所有现代版本都没有供应商前缀。这意味着您不再需要执行-webkit-，-moz-和-o-这些内容。 =）

另外，我个人并不喜欢使用transition: all，因为要说明你想要转换的内容并不容易。我建议您指定要转换的每个内容，例如：

transition: opacity .3s ease-in-out, color .3s ease-in-out, margin .3s ease-in-out;

颠倒CSS悬停转换的顺序

1 个答案: