とても柔軟にデザインを再現できるようになったCSS。だからこそ時として小さな挙動の再現が出来ず、ハマってしまうことがあります。今回は画像の上にバッジのようにアイコンを付けて画像にリンクを貼った際に、アイコンの上でだけリンクが機能しない、といった時の解決法を書いていきます。
画像にaタグでリンクを設定して、aタグ外にあるアイコンを画像の左上に配置する
まず以下のように画像にリンクを設定して、画像の左上にアイコン画像を被せるように配置してみます。
この状態で左上に配置したアイコンの上にマウスを持っていくと、リンクから外れてしまっています。もちろんアイコン画像をクリックしても画面が遷移することはありません。この状態のHTMLとCSSは以下のようになっています。
HTML
CSS
.pointer-events-none_wrap{ position: relative;}
.pointer-events-none_wrap a{ display: block; transition: .3s;}
.pointer-events-none_wrap a:hover{ opacity: 0.7;}
.pointer-events-none_wrap .pointer-events-none_icon{ position: absolute; top: 15px; left: 15px;}
この例であれば「aタグの中にアイコン画像のimgタグを入れれば良いのでは？」となるのですが、そうはいかない時のためのCSSが今回お伝えしたい「pointer-events: none;」です。
「pointer-events: none;」をアイコン画像のimgに適用する
いかがでしょうか。「pointer-events: none;」を適用することで、無事にアイコン画像の上でもリンクが機能するようになったかと思います。
文字の上にアイコン画像を配置したときの例
続いて文字の上にアイコン画像を配置した場合の挙動を確認してみます。
説明を兼ねて、この文章の左上にアイコン画像を配置してみました。今回の例ではリンクを設定するわけではありませんが、アイコンが被っている範囲にある文字が選択できない状態のため、コピペしてほしいような場面では困ってしまいます。
それではこちらの文章で挙動をご確認下さい。
「pointer-events: none;」を適用することで、アイコン画像の下に被っている文字も選択できるようになりました。（挙動を確認しやすいよう、hoverでアイコン画像が半透明になるようにしています。
以上、クリックやタップを無効にするためのCSS「pointer-events: none;」でした。
