DOM内の要素を隠すときにdivのサイズを維持する

Question

divを動的に作成しました。いくつかのテストでは、私は30divsに行きます。

各部門のボタンバーが下部にあります。 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

代わりdisplay

Visibilityの使用visibilityは、要素のスペースを維持します。

1、唯一のCSS

opacityを使用する：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

スペースを削除します。

#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クラスを追加しました