display: none
これを実装する最も簡単な方法は、transparent
色の使用を避けて使用することです。
.hidden {
width:100px;
height:100px;
color: transparent;
background-color: transparent;
}
.display {
width:50px;
height:50px;
color: #000;
background-color: yellow;
display:block;
}
JS フィドルのデモ。
visibility
の代わりに使用するオプションもありますdisplay: none
。
.hidden {
width:100px;
height:100px;
visibility: hidden;
}
.display {
width:50px;
height:50px;
color: #000;
background-color: yellow;
visibility: visible;
}
JS フィドルのデモ。
ただし、これにより、visibility: hidden
要素は DOM で割り当てられたスペースを占有しますが、明らかに空のままになります (したがって、物理的なサイズがまだあり、ページに表示されないだけです)。ただし、子要素はそのプロパティをオーバーライドできます。宣言するvisibility: visible
。
正直なところ、後者の提案は事実上、最初の提案とまったく同じであり、一部のブラウザーで発生する可能性のある問題を回避するだけですtransparent
(color
どのブラウザーでこの問題が発生したかは思い出せませんが、以前のバージョンだったようですIE ですが、その回想を裏付ける文書を参照することはできません)。
残念ながら、display: none
親の宣言を子要素でオーバーライドすることはできませんopacity
。
前述のように、最も簡単な解決策は、単純に要素を親から移動し、継承の問題を補うのではなく回避することです。