visibilityプロパティは要素が生成するボックスの表示・非表示を指定します。ただし、要素を非表示に指定しても、その要素が生成するボックス分のスペースは残り、レイアウトにも影響します。要素の生成するボックスのスペースを前後に詰めて何もないものとしたい場合には、display : none ; を指定します。visibilityプロパティは、JavaScript と組み合わせて、ポインティングデバイスのボタンの押下に応じて画像を出現させるなどのダイナミックな演出をするのに使用されています。
visiblehiddencollapseinheritvisiblevisibilityプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。
visiblehiddencollapsehidden" と同じ効果)"collapse" は表の行・行グループ要素(tr要素, thead要素, tfoot要素, tbody要素)、列・列グループ要素(col要素, colgroup要素)に対して指定し、指定された範囲を取り除くことで、表全体を詰めて表示するために使用します。なお、表要素以外に "collapse" の値が指定された場合は、"hidden" が指定された場合とと同じように要素が生成するボックスを不可視(透明)にします。
collapse" の値は未実装)
a.visible { visibility : hidden ; }
a.visible:hover { visibility : visible ; }
......
<p>何が現れるかな!下(↓)の空白領域にカーソルをのせてみよう<br />
<a href="image.jpg" class="visible"><img src="image.jpg"
width="320" heihgt="300" alt="コアラ" />
<br />ジャジャーン!「コアラ」さんでした!</a></p>
visibilityプロパティは、:hover疑似クラスや JavaScript と組み合わせて動的な表現を演出する際に利用されます。