後ろの要素をクリックさせたい時は「pointer-events」を使おう。 | 静岡のHP屋コラム | 沼津・三島・静岡 ホームページ制作 | 制作費97,500円～スマホも対応

サイトをコーディングしていく際、z方向に何層か重なっていて見え方の順序とクリックの順序を変えたい場合ってありませんか？要素Aと要素Bが重なっていているときに見え方としては上からA→Bの順だけど、クリックした場合はB要素をクリックさせたい、というよう場合です。 具体的には下記のようなデザインの時ですね。見え方としてはボタニカル柄が前面にあるけど、クリックした場合は後ろのスライダーをクリックさせたいような場合です。 ※下記例ではスライダー画像にはページトップへのリンクが付いており、前面に配置されているボタニカル柄の画像にはリンクが設定されていません。 [[CMSmodule.parts::slider#param=2]] そんな時はこのCSSでお手軽に実現できます。 「pointer-events: none;」 このCSSプロパティを前面の要素(上記の例でいえばボタニカル柄の要素)に使うこと