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

Answer 2

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

Answer 3

您可以根据需要尝试这两种方法：

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

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

希望对您有所帮助。ty