javascript - 在DOM中隐藏元素时制作一个保持其大小的div

Question

我已经动态创建了 div。对于某些测试，我选择 30 个 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>

Answer 1

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