我正在尝试创建一个在悬停时扩展的div,但无法弄清楚如何使用div扩展内容.我尝试了一些溢出选项,但它们没有用.
.grow {
padding: 5px 5px 5px 5px;
border-radius:10px;
height: 50px;
width: 22%;
margin: 5px 1% 5px 1%;
float: left;
position: relative;
transition:height 0.5s;
-webkit-transition:height 0.5s;
text-align: center;
}
.grow:hover {
height: 115px; /* This is the height on hover */
}
<div class="grow" style="background-color: #2a75a9;">
<h2>Title</h2> <br>
Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
</div>
这是JSFiddle
解决方法
添加溢出：隐藏到父(.grow)容器以隐藏描述.这将揭示悬停的描述.
此外,而不是使用< br />标记,将文本包装在< p>标签.
.grow {
padding: 5px 5px 5px 5px;
border-radius: 10px;
height: 49px;
width: 22%;
margin: 5px 1% 5px 1%;
float: left;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
text-align: center;
overflow: hidden;
}
.grow:hover {
height: 145px;
}
<div class="grow" style="background-color: #2a75a9;"> <h2>Title</h2> <p>Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p> </div>
