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

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

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

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

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

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

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

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

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

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

この記事を書いた人

Yuhei Katayama

【フロントエンドエンジニア】

2014年よりフリーランスとして活動開始、3年目。タイが好きでよく行く。人手不足を補うをもっとうに仕事しています。HTML、Wordpress、EC-CUBE、MakeShop、カラーミーショップ、楽天のカスタマイズ経験あり。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。