visibility:hidden と opacity:0
◆ opacity:0 は見えないだけでそこにある
◆ visibility:hidden は要素のサイズは確保されるけどそこにはない
◆ visibility:hidden は要素のサイズは確保されるけどそこにはない
visibility:hidden と opacity:0 って同じもののように考えてる人多いですよね
私も一緒だと思ってました
ですが 別物です!
まず opacity:0 は透過度を上げて完全に透明にするものです
透明なだけでそこにあるのでクリックできます
リンクを踏めば飛びますし onclick イベントも発生しますし チェックボックスやラジオボタンは切り替わります
それに対して visibility:hidden は見えなくするものですが ブロックの大きさだけ存在して中は何もないように扱われます
リンクやクリックイベントなどは反応しません
opacity:0 にして上に透明な別のレイヤで覆ってるようにも考えられそうですが そういうわけではありません
Tab キーを押して input 要素のフォーカスを切り替えると opacity:0 はもちろんみえないだけでそこにフォーカスが行きますが visibility:hidden ではフォーカスも当たらないのです
display:none にブロックサイズの確保だけしたものといってよさそうです
サンプル
※音が鳴ります
opacity:0 と visibility:hidden と display:none を並べています
それぞれに
a タグ
クリックイベント付き div タグ
チェックボックス
が入っています
クリックしたり Tab キーでフォーカスしてみると opacity:0 のだけが操作できていると思います
それと 音だとどうなるんだろうと思って audio タグを visiblity:hidden と dispay:none につけています
「ぽよーん」と飛び跳ねそうな音が鳴っているのが visibility:hidden の方です
「びぃーん」とビーム撃ってそうな音が鳴っているのが display:none の方です
音はどっちもなるんですね
これだとたぶん動画も再生されてそうです
私も一緒だと思ってました
ですが 別物です!
まず opacity:0 は透過度を上げて完全に透明にするものです
透明なだけでそこにあるのでクリックできます
リンクを踏めば飛びますし onclick イベントも発生しますし チェックボックスやラジオボタンは切り替わります
それに対して visibility:hidden は見えなくするものですが ブロックの大きさだけ存在して中は何もないように扱われます
リンクやクリックイベントなどは反応しません
opacity:0 にして上に透明な別のレイヤで覆ってるようにも考えられそうですが そういうわけではありません
Tab キーを押して input 要素のフォーカスを切り替えると opacity:0 はもちろんみえないだけでそこにフォーカスが行きますが visibility:hidden ではフォーカスも当たらないのです
display:none にブロックサイズの確保だけしたものといってよさそうです
サンプル
※音が鳴ります
opacity:0 と visibility:hidden と display:none を並べています
それぞれに
a タグ
クリックイベント付き div タグ
チェックボックス
が入っています
クリックしたり Tab キーでフォーカスしてみると opacity:0 のだけが操作できていると思います
それと 音だとどうなるんだろうと思って audio タグを visiblity:hidden と dispay:none につけています
「ぽよーん」と飛び跳ねそうな音が鳴っているのが visibility:hidden の方です
「びぃーん」とビーム撃ってそうな音が鳴っているのが display:none の方です
音はどっちもなるんですね
これだとたぶん動画も再生されてそうです