CSS PR

リンク上に重なっている要素を無視してリンクをクリックできるようにする方法

記事内に商品プロモーションを含む場合があります

最近のwebサイト作ってるとリンク要素の上にいつの間にかpositionとかで重ねちゃってるときあるよね。
あるある!(

そんな時に、上の要素を無視して下のリンクをクリックできるようにする方法を紹介します。
じつはCSSだけで簡単にできちゃう。
では早速コードを書いていくー!

リンク上に重なっている要素を無視してリンクをクリックできるようにする方法

上に重なっている要素に下記コードを追加してあげるだけ!

pointer-events: none;

 

ね?簡単でしょ?
最近は、beforeとかafterでサイトのデザインを表現しないといけない場面が多数出てくるので、もし要素が重なっちゃったらこれを追加するだけで簡単に対応可能です。
リンク押せねーーーー!ってなったら使ってみてね٩( ‘ω’ )و

 

 

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)