12

好的，所以我不明白为什么这不能缓解，只是在：（例如，为了快速查看，只需将其粘贴到http://htmledit.squarefree.com中）

<style>
#over {
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg);
height:150px;
width:150px;
}

#in {
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
height:150px;
width:150px;
}

#in:hover {
opacity: 0;
transition: opacity .3s ease-in-out;
}

</style>

<div id="over">
<div id="in"></div
</div>
4

2 回答 2

30

我不确定你到底在问什么，但我认为你是说过渡只发生在鼠标悬停时，而不是当你鼠标移开时（它只是恢复到以前的方式，而不是过渡）。您需要将转换属性添加到#in，而不是#in:hover。仅当您的#in元素悬停时才会发生过渡。将用于过渡的 css 移到下方#in，它将在鼠标悬停和鼠标移出时起作用。您希望将悬停状态所需的 css 保留在 下#in:hover，在这种情况下，不透明度会发生变化，但实际的过渡 css 属性将位于 下#in。

为了更清楚一点：

#in {
    background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
    height:150px;
    width:150px;
    transition: opacity .3s ease-in-out; /* add this here */
}

#in:hover {
    opacity:0;
    /* and we've removed it from here */
}

要知道的是，缓入出与何时转换无关。看起来，缓入是悬停，缓出是鼠标悬停，但实际上，缓入意味着它会慢慢缓入和缓出，而不是像缓入那样缓和慢慢地进入过渡，然后加速接近尾声。它与过渡本身的风格有关，而不是何时发生。

也许您已经理解了这一点，但是根据您的问题，您似乎对此感到困惑。

于 2013-02-19T23:32:27.447 回答
2

我发现@welbornio 的答案对我有用，但是ease-in-out 一开始并不完美。当应用于“img”时，缓解效果只能间歇性地起作用。我发现为了让效果每次都能发挥作用，我必须将缓入应用于“img”，将缓出应用于“悬停”。我不确定为什么会发生这种情况，但如果有人遇到同样的问题，这是一个解决方案。

于 2015-09-29T22:39:22.793 回答