NEGIKA BLOG

WEB/DTP DESIGNER NEGIKA

NEGIKA BLOG

WEB/DTP DESIGNER NEGIKA

2019.09.07

CSS

重なっててクリックできない!下の要素クリックできるようにする方法

「aタグやグーグルマップ、動画」等の上に、画像や他の要素を配置した場合、下の要素が選択(クリックやドラッグ)できなくて困った!という問題を経験したことがありませんか?

グーグルマップの上に画像を配置するという案件があり、画像の下のグーグルマップが動かせないという問題が発生したため今回調査して解決策を探しました。

今回CSSをたった1行追加するだけで解決できました!

下の要素をクリックできるようにする方法

ドラッグできない例:グーグルマップとテキスト

このようにテキストの黄色背景の部分はドラッグできません。

See the Pen
blog_pointer-events_01
by 葱 (@negika)
on CodePen.


上の要素のCSS「pointer-events」を変更する

単純に上のCSSに「pointer-events: none;」を追加してみてください。このように黄色い部分でもグーグルマップがドラッグ可能です。

See the Pen
blog_pointer-events_02
by 葱 (@negika)
on CodePen.


まとめ

以上、下の要素をクリックする方法をご紹介しました!たった1行で解決できる「pointer-events: none;」って、知らない方多いのでは!?活用してみてください。

この記事のURLとタイトルをコピーする

PROFILE

negika

WEB/DTP Designer

工業高校と大学でデザインと建築を学び、その後専門学校でWEBを学ぶ。制作会社勤務を経てフリーランスへ。

→プロフィールはこちら

CONTACT

ホームページ制作/ウェブデザイン/コーディング/印刷物デザインのご依頼/お見積もり/制作実績閲覧はこちらからご連絡ください↓外注先をお探しの制作会社様もお気軽にご相談ください↓

CONTACT