在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而不是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 2

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

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