html – 如何在悬停时展开div及其内容？

发布时间：2020-12-14 23:38:02 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个在悬停时扩展的div,但无法弄清楚如何使用div扩展内容.我尝试了一些溢出选项,但它们没有用. .grow { padding: 5px 5px 5px 5px; border-radius:10px; height: 50px; width: 22%; margin: 5px 1% 5px 1%; float: left; position: relative;

我正在尝试创建一个在悬停时扩展的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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!