◆ opacity:0 は見えないだけでそこにある
◆ 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 の方です

音はどっちもなるんですね
これだとたぶん動画も再生されてそうです