Html 如何在悬停时扩展 div 及其内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27441404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to expand a div and its contents on hover?
提问by Nicole
I'm trying to create a div that expands on hover, but cannot figure out how to make the content expand with the div. I've tried a few overflow options, but they didn't work.
我正在尝试创建一个在悬停时扩展的 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>Here is the JSFiddle
这是JSFiddle
回答by Weafs.py
Add overflow: hiddento the parent(.grow) container to hide the description. This will reveal the description on hover.
添加overflow: hidden到 parent( .grow) 容器以隐藏描述。这将显示悬停时的描述。
Additionally, instead of using the <br />tag, wrap the text in a <p>tag.
此外，不要使用<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>回答by Aru
just update;
刚刚更新；
.grow:hover {
height: auto; /* This is the height on hover */
}
回答by Steevan
Check with the below link if it works with you.
如果它适用于您，请查看以下链接。
https://jsfiddle.net/gknLstpt/9/
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;
}
回答by berge
With CSS only, first key is "overflow:hidden", but if you fix height, all your elements expands same way, no mater containing text. If you do "height:auto", they expands right heights, but no animation supported. There is a way you do both with some little javascript, to use element.scrollHeight, that gives you correct height on all needed elements.
仅使用 CSS，第一个键是“溢出：隐藏”，但是如果您固定高度，则所有元素都以相同的方式展开，无论是否包含文本。如果您执行“height:auto”，它们会扩展正确的高度，但不支持动画。有一种方法可以使用一些小 javascript 来实现，即使用 element.scrollHeight，它可以为您提供所有需要元素的正确高度。
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>