web関連

前面にある要素を無視して背面のaタグをクリックできるようにするcss

前面にある要素を無視して背面のaタグをクリックできるようにするcss

wordprssのデフォのギャラリーのcssを修正していてaタグのブロックに被る様にキャプション設置したらその分クリックできる箇所が狭まったからなんとかならないか調べたらcssでなんとかなったので備忘録

「pointer-events」プロパティ

これを前面に設置した要素に指定すれば、背面のaタグクリックできます。

.前面要素{
	pointer-events: none;
}

あ、最近のブラウザは全部対応してんすね。

ブラウザの互換確認(https://caniuse.com/)

過去にaタグのリンクを無効化する記事で使ってた…

javascriptでaタグのリンク遷移を無効化する方法 aタグにjavascript:void(0)を設定するだけでok ...

「pointer-events:none;」でマウスイベント系全部反応させないようにするみたいっすね
便利やわー