プロパティ visibility
プロパティ visibility は要素を非表示に設定します。
ただし、他のすべての要素は、この要素が消えていないかのように振る舞います。
構文
セレクタ {
visibility: visible または hidden または collapse;
}
値
| 値 | 説明 |
|---|---|
visible |
要素は表示されます。 |
hidden |
要素は透明のように見えなくなりますが、 ページのレイアウトには引き続き参加します。 |
collapse |
テーブルのセル内容に collapse を使用すると、
それらは消えたようになり、テーブルは新たに再構築されます。
この値がテーブルの行や列以外に適用される場合、 その使用結果は hidden と同じになります。
|
デフォルト値: visible。
例
最初の段落のテキストが最初は見えず、
ボタン 'Show text' にカーソルを合わせると
読めるようにしてみましょう：
<button>テキストを表示</button>
<div class="text">テキスト1</div>
<div>テキスト2</div>
div{
border: 1px solid black;
width: 100px;
}
.text {
visibility: hidden;
}
button:hover + .text {
visibility: visible;
}
:
