Question

好的，所以我不明白为什么这不会缓和，只有:(快速查看，只需将其粘贴到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>

Answer 1

我不确定你究竟在问什么，但我认为你说过渡只发生在鼠标上，而不是鼠标移出时（它只是快速恢复到以前的状态）而不是过渡）。您需要将过渡属性添加到#in，而不是#in:hover。转换仅在您的#in元素悬停时发生。在#in下移动css进行转换，它将在鼠标悬停和鼠标移出时起作用。您希望在#in:hover下为悬停状态保留所需的css，在这种情况下，不透明度更改，但实际转换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 */
}

要知道的是，轻松进出与过渡时间无关。可能看起来就是这样，轻松就是悬停，轻松就是鼠标输出，但实际上，轻松进出意味着它会慢慢缓慢进出，而不是像轻松进入这样的东西慢慢进入过渡，然后加速到最后。它涉及过渡本身的风格，而不是它何时会发生。

也许你已经明白了，但基于你的问题，你似乎对此感到困惑。

Answer 2

我发现@welbornio的答案对我来说很有用，但是，轻松进出并不是最好的。当应用于＆＃39; img＆＃39;缓和效果只能间歇性地起作用。我发现，为了让效果每次都有效，我必须将轻松应用到“img”中。以及“徘徊”的轻松感。我不确定为什么会这样，但如果有人遇到同样的问题，那就是一个解决方案。

CSS过渡缓解不起作用

2 个答案: