html - 隐藏文本直到 HTML 元素展开以显示它？

Question

我有一个 div，当鼠标悬停在它上面时，它的高度会从 50px 扩展到 125px。我想在 div 的底部放置一些文本和图像，以便在 div 展开之前隐藏它，并在展开滚动时显示出来。这是我在 CSS 中的扩展语法:

.Home {
height:50px;
width:100px;
display:inline-block;
position:relative;
z-index:1;
transition: height .5s ease-in-out;
-webkit-transition: height .5s ease-in-out;
}

.Home:hover {
height 150px;
}

任何人都可以帮助我指明正确的方向吗？

Answer 1

您只需将 overflow:hidden 添加到 .Home 类定义中即可。还要在 .Home:hover 类中的高度后添加冒号。

.Home { height:50px;
width:100px;
display:inline-block;
position:relative;
z-index:1;
transition: height .5s ease-in-out;
-webkit-transition: height .5s ease-in-out;
overflow:hidden;
}