display:none; VS visibility:hidden; VS opacity:0;

CSSで要素を見えなくする以下の3つの指定についてです。それぞれ挙動に違いがあるのでまとめておきます。
**”領域を確保するかどうか”と"クリックできるか”**の違いがあることを覚えておくようにしています。

表にまとめると以下のようにそれぞれ違う挙動になります。

スタイル	領域の確保	クリック（イベント）
display:none;	×	×
visibility:hidden;	○	×
opacity:0;	○	○

#使い所

display:none;

完全に消えます。

visibility:hidden;

領域を確保するけどクリックすることはできない。

opacity:0;

透明になるだけで消えるわけではない。領域も確保するしクリックも出来るため誤クリックの原因になることも。(対応を後述)

##opacityプロパティの値が0の時の誤クリック対応

非表示にしていた要素をアニメショーンを使ってふわっと表示させたい時があると思います。
displayの値がnoneになっているとtransitionプロパティが効かないのでopacityを使いたいところですが、領域も確保するしクリックも出来るため誤クリックが起きてしまいます。その場合はpointer-eventsプロパティを使って対応できます。

css

.item{
 opacity: 0;
 pointer-events: none;
 transition: all 0.5s;
}
.item:hover{
 opacity: 1;
 pointer-events: auto;
}