在DOM中隐藏元素时使div保持其大小
我已经动态创建了div。对于一些测试，我去30个div。在DOM中隐藏元素时使div保持其大小
每个div在底部都有一个按钮栏。我只是想展示这个酒吧，当悬停div容器。
隐藏这些元素时，div变小/正在缩小。我想保持这个更大的尺寸，所以只有按钮被隐藏，但容器保持其大小。
离开div时，只有按钮应该消失。
#wrapper{
padding: 50px;
background-color: red;
}
#content{
color: white;
padding: 10px;
font-size: 20px;
}
#wrapper:hover .btn{
display:block;
}
.btn{
display:none;
}<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>
使用visibility而不是display
Visibility将保持元件室。 display将删除空间
#wrapper{
padding: 50px;
background-color: red;
}
#content{
color: white;
padding: 10px;
font-size: 20px;
}
#wrapper:hover .btn{
visibility:visible;
}
.btn{
visibility:hidden;
}<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>
使用visibility控制元素的可见性。它隐藏了这些元素，但是在页面中保留了它们的占用区域，保留了框模型。
#wrapper{
padding: 50px;
background-color: red;
}
#content{
color: white;
padding: 10px;
font-size: 20px;
}
#wrapper:hover .btn{
visibility:visible;
}
.btn{
visibility:hidden;
}<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>是的，这是我需要的，但正如上面在评论部分提到的那样，它真的很慢，不是吗？ – peterHasemann
@peterHasemann请参阅[本答案]（https://stackoverflow.com/a/11757068/2019247）。迄今为止没有性能影响。 – 31piy
，你可以尝试这两种方法都根据自己的需要：
1，只有CSS
使用opacity。
#wrapper{
padding: 50px;
background-color: red;
}
#content{
color: white;
padding: 10px;
font-size: 20px;
}
#wrapper:hover .btn{
opacity:1;
}
.btn{
opacity:0;
}<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>1，CSS和jQuery
Uisng代码在你Q，只增加一类test-height
var firstHeight = $('.test-height').height();
$('.test-height').height(firstHeight);
$('.btn').hide();#wrapper{
padding: 50px;
background-color: red;
}
#content{
color: white;
padding: 10px;
font-size: 20px;
}
#wrapper:hover .btn{
display:block !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="content">
content
</div>
<div class="test-height">
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>希望这helps.ty
只是处理不透明度明显更快，是 – peterHasemann
是的，CSS要快得多。 peterHasemann，我已经对代码进行了一些更改，请再次检查一遍。 – weBBer
这就是我正在寻找的！但它真的很慢，不是吗？我以为它会立即显示/隐藏 – peterHasemann
没有。它与hide/show相同。 –