[CSS]要素が重なった時に下の要素のクリックイベントを有効にする。

cssテクニック ホームページ制作

例えばですが。inputがあったとしてinputの上に何かアイコンがあるとアイコン部分はボタンとして認識しません。

書き方にもよるんですが、アイコンを認識させるにはinputのvalueに書かないといけませんが、そうするとボタンっていう文字が書けない。
beforeなどの擬似クラスでいれたいところですが、inputには擬似クラスが入れれません。

なので、inputの上の階層にbeforeとかで入れてpositionで移動させるっていう手段を使います。
上の画像のような例だとそうなります。

しかし、問題があって最初に言いましたがその状態では、アイコン部分にボタンの機能がついてませんので押せないのです。

そんな時便利なのが、pointer-eventsというプロパティで、タッチクリックイベントに関連する動作に作用します。

以下のような時に使います。

  • 後ろの要素をクリックさせる時
  • 画像保存をさせたくない。

今回は後ろの要素をクリックさせたくなかったのでこちらを使いました。

あんまりこれ使う機会はないんですが、たまに使うので覚えておくと良いかと思います。

気に入った記事であれば、ぽちっとお願いします<(_ _)>