CSS opacity: 0 のリンクを消す

2019.10.08 プログラミング, CSS

aタグやクリックイベントを持った要素の領域を保持したまま、css だけでフェードインしたりフェードアウトしたりする方法です。

必要なときはさほど多くないと思いますが、これが一番簡単かなという方法を思いつきましたのでメモ程度です。

要素を非表示にするプロパティ
opacity: 0; pointer-events: none;

01要素を非表示にするプロパティ

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

要素を非表示する場合に使うプロパティはこの３つかと思います。

display …… 領域非保持、クリック不可、アニメーション不可
visivility …… 領域保持、クリック不可、アニメーションは animationプロパティで可
opacity …… 領域保持、クリック可、アニメーションは transitionプロパティで可

02opacity: 0; pointer-events: none;

一番簡単そうなのは opacity ですが、非表示になってもクリックできてしまいますのでこれだけでは使えません。面倒ですが visivility かなと思ったんですが、何のことはない、opacity: 0 になった時に、pointer-events: none にすればいいだけでした。思いついてググってみればもうやっている人がたくさんいました。IE11 以上に対応していますので事実上問題ないでしょう。

.element{
    opacity: 1;
    transition: opacity 1s;
    pointer-events: auto;
}
.fadeout .element{
    opacity: 0;
    pointer-events: none;
}

クラス element を持つ要素の上位要素にクラス fadeout を付加するケースです。

#CSS