今回は、pointer-eventsプロパティを使用して、重なった要素の後側にリンクを効かせる方法を紹介します！
また、下記の記事のではスマートフォン、タブレットのみに効かせる方法としても紹介しました！ 気になる方は併せてご覧ください！
ホバーやクリックなどのマウスイベントを無効にしたように見せるプロパティです。
※キーボードのタブによるフォーカスとエンターによるクリックはできるので注意
pointer-eventsの初期値は「auto」でマウスイベントのがホバーやクリック有効
「none」を指定するとホバーやクリックが無効
設定は簡単です。
重なっている上の要素に［pointer-events：none］を指定するだけです。
.sample {
pointer-events: none;
}まずは、重なっている画像に［pointer-events：none］に指定した場合ととそうでない場合のデモです。デモの［Result］の［Run Pen］をクリックし、テキストと重なっている箇所の画像をそれぞれホバーやクリックをしてみてください。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
このように、［pointer-events：none］にすると重なった要素の後側にある要素がクリックできるようになりました！
次に、画像にホバー設定をして全体にリンクを設定した場合、リンクは効きますが、テキストをクリックすると、画像のホバーが効きません。
こちらも、［pointer-events：none］を設定した場合とそうでない場合のテキストをホバーやクリックしてください。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
［pointer-events：none］を指定してあるテキストは、画像のホバーも効くようになりました。
pointer-eventsプロパティは、以下の場合にも使えるのでぜひ使ってみてください！
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
