Question

我试图创建一个在悬停时扩展的div，但无法弄清楚如何使用div扩展内容。我尝试了一些溢出选项，但它们没有用。

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

以下是JSFiddle

Answer 1

将overflow: hidden添加到父（.grow）容器以隐藏说明。这将揭示悬停的描述。

此外，不要使用<br />标记，而是将文字换成<p>标记。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

只是更新;

.grow:hover {
    height: auto; /* This is the height on hover */
}

Answer 3

如果适合您，请查看以下链接。

https://jsfiddle.net/gknLstpt/9/

 .grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  height: 49px;
  width: 15%;
  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;
    width: 145px;
}

Answer 4

仅在CSS中，第一个键是“ overflow：hidden”，但是如果您固定高度，则所有元素都将以相同的方式扩展，而不会包含文本。如果您执行“ height：auto”，则它们会扩展到正确的高度，但不支持动画。可以使用element.scrollHeight使用一些小的javascript来完成这两种操作，从而为所有需要的元素提供正确的高度。

if (document.getElementsByClassName("auto")) {
  var autos = document.getElementsByClassName("auto");
  for (var i=0; i<autos.length; i++) {
    autos[i].addEventListener("mouseover", autoOver);
    autos[i].addEventListener("mouseout", autoOut);
  }
}

function autoOver() {
  this.style.height = this.scrollHeight + "px";
}

function autoOut() {
  this.style.height = "20px";
}

.auto {
  display: block;
  margin: 20px;
  width: 400px;
  height: 20px;
  overflow: hidden;
  transition: all .5s ease;
}

<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

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

4 个答案: