他の要素と重なってしまってボタンが押せなくなったよ！
そんな時は、「pointer-events: none;」を指定しておくといいよ
pointer-events: none とは何か？
pointer-events プロパティは、要素がポインティングデバイス（マウス、タッチスクリーンなど）のイベントにどのように反応するかを制御します。
pointer-events: none; を設定した要素は、マウスクリックやタッチイベントを無視するため、ユーザーがその要素を操作することはできませんが、その背後にある要素に対する操作は可能になります。
サンプルコード
さて、クリックができないとは、どのような状況でしょうか？
サンプルを用意したのでご覧ください。
フレームの中にボタンがありますが、クリックできません。
これは、前面にフレームの画像が来ているためです。
png画像なので、透過していますが、クリックすることはできないんですね。
フレームの重なり順を後ろに持っていけば当然、クリックできますが、それだとデザインも少し変わってしまいそうです。
そんな時に、pointer-events: noneを指定すると・・・
ボタンをクリックできるようになったのが分かると思います。
<div class="frame_wrap">
<div class="frame_inr">
<p class="frame_btn"><button id="myButton">クリックしてください</button></p>
</div>
</div>.frame_wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 0.676;
}
.frame_wrap::after {
/* pointer-events: none を指定 */
pointer-events: none;
content: "";
display: block;
background: url(https://web-create-kokusyo.com/wp-content/uploads/2024/05/820861-1.png) no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.frame_inr {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 11%;
box-sizing: border-box;
}
.frame_btn {
width: 100%;
height: 100%;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1em;
}もう一つサンプルを用意しました。
今度はGoogleMapに黒のオーバーレイを掛けてみました。
pointer-events: none なし
pointer-events: noneを指定していない場合です。
前面に薄い黒のオーバーレイテキストがあるため、後ろのマップが操作できません。
東京スカイツリー
pointer-events: none あり
pointer-events: none を指定した場合。
オーバーレイのテキストは無視されるため、マップが操作できました。
東京スカイツリー
<div class="map_block">
<!-- 背景要素 -->
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7631.402407105409!2d139.81090518174761!3d35.7102754680497!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1715037914112!5m2!1sja!2sjp" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<!-- テキストレイヤー -->
<div class="map_txt">
<p>東京スカイツリー</p>
</div>
</div>.map_block {
position: relative;
max-width: 400px;
margin: 0 auto;
aspect-ratio: 1/1;
border: 1px solid #000;
padding: 10px;
}
.map_block iframe {
width: 100%;
height: 100%;
border: 0;
}
.map_txt {
/* pointer-events: none を指定 */
pointer-events: none;
position: absolute;
top: 30px;
bottom: 30px;
right: 30px;
left: 30px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}以上 クリック出来ないときの対策でした。
結構手前の飾りつけの画像が邪魔でクリックできないというのはあるあるです。
そういった時は、この「pointer-events: none;」を思い出してください。
私はたまに忘れてます。
