CSS过渡渐出不工作

好了，我不明白为什么这不能缓解，只能是：（快速浏览，只需将其粘贴到http://htmledit.squarefree.com，例如）CSS过渡渐出不工作

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

来源

2013-01-23 Elixan

我不确定你究竟在问什么，但我想你是说过渡只发生在鼠标悬停的时候，而不是当你将鼠标移出时（它会恢复到以前的状态，而不是过渡）。您需要将您的过渡属性添加到#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 */ 
}

知道的事情是，易于进出有没有关系时，它就会转变。这看起来似乎是这样的，轻松进入悬停状态，并且缓出是随时可用的，但实际上，缓入意味着它可以缓慢进出，而不是像缓入式那样容易进入，这可以缓解慢慢地进入过渡，然后加速到最后。它涉及过渡本身的风格，而不是何时会发生。

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

来源

2013-02-19 23:32:27 welbornio

为了澄清他人，你在'#in：hover'中放置'opacity：0;'并将过渡移到'＃in'。 – AJP

正确。我已经更新了我的答案。 – welbornio

漂亮，通过谷歌在15秒内发现并在25秒后解决了问题 – franklinexpress

我发现@welbornio的答案对我有效，但是一开始就不能很好地工作。当应用于'img'时，缓和效果只能间歇性地发挥作用。我发现，为了让效果每次都有效，我必须将易用输入应用于'img'，并将缓解应用于'悬停'。我不确定为什么会发生这种情况，但如果有人遇到同样的问题，那就是一个解决方案。

来源

2015-09-29 22:39:22

CSS过渡渐出不工作

回答

相关问题