我就是无法让它工作。我很确定这一定是可能的。
这只是一个例子。我希望内部 div 向下移动并具有过渡效果。
<div id="outer">
<div id="inner"></div>
</div>
<style type="text/css">
#outer
{
width:200px;
height:200px;
background-color:Yellow;
}
#inner
{
position:relative;
-webkit-transition: top .4s ease-out;
-moz-transition: top .4s ease-out;
width:50px;
height: 100px;
background-color:Red;
}
#inner:hover
{
top:20px;
}
</style>
它工作正常 f.ex。在 Chrome 中,但不是 Firefox 14 和 Opera 12(具有相应的 -o-transition)。我尝试了唯一的“过渡”属性但没有效果。
最佳答案
您不能从 auto
转换为 20px
。在 #inner {}
中将其明确设置为 0px
。
关于css - 过渡 : top not working in Firefox and Opera,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11673977/