Engrave with!!
手彫り工房ブログ

手彫り工房のオフィシャルブログです。金属彫ってます。彫ってます。

cssのopacity:0とdisplay:noneの違い。隠れ方にもいろいろあるのか・・。

2016
17
こんにちは。

こちらのショップにカテゴリを追加したい記事でopacity:0だとクリックできないと書いてました。
すみません。できます。すでに訂正しておきました。

隠れ方にもいろいろあるんですね~。
隠れる


opacityは見た目が透明になるだけ


これ完全に勘違いしてました。
opacityは透明になるだけで、クリックもhoverも効くんですね。
要素自体は存在しているわけです。

display:noneはディスプレイ上から存在が消える


対してdisplay:noneは本当に存在が消えます。
クリックもできないし、マウスが上に載ってもhoverが働くことはありません。
しかし、ラジオボタンなどはlabelで関連付けておけばしっかり働きます。
あくまでディスプレイ上からなくなるだけなんですね。


今回のミスで、cssも奥が深いなぁと実感しました。
それでは。