内部 div 的高度可变,具体取决于内部文本的长度,该高度始终比外部 div 短。我希望当外部 div 悬停时,内部覆盖 div 从 top:100% 向上滑动到bottom:0。我下面的 CSS 代码没有产生我想要的向上滑动效果。它只是在外部 div 的底部弹出内部 div。
<div class="outer">
<div class="inner">This is a content block.</div>
</div>
.outer {
position:relative;
background-color:#eee;
width:150px; height:150px;
overflow:hidden;
}
.inner {
position:absolute; z-index:10;
box-sizing:border-box; width:100%; padding:10px;
background-color:rgba(0,0,0,0.5); color:#fff;
left:0; right:0; top:100%; bottom:auto;
transition:top 300ms, bottom 300ms;
}
.outer:hover .inner {
top:auto; bottom:0;
}
您的代码无法工作,因为从/到的转换不起作用auto
.
你可以默认设置bottom:0并使用transfom,例如
.outer {
position:relative;
background-color:#eee;
width:150px; height:150px;
overflow:hidden;
}
.inner {
position:absolute; z-index:10;
box-sizing:border-box; width:100%; padding:10px;
background-color:rgba(0,0,0,0.5); color:#fff;
left:0; right:0; bottom:0;
transform: translateY(100%);
transition: transform 300ms;
}
.outer:hover .inner {
transform: translateY(0);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)