CSS过渡缓解不起作用

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元素悬停时发生.移动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 */
}

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

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