マウスのクリックを透過・無効化させる2つの方法 CSSとjQuery - 自動化厨のプログラミングメモブログ │ CODE:LIFE

.hogehoge { pointer-events: none; }

例えば商品ページの商品画像にリンクが貼ってある状態で、その商品が売り切れになり、商品画像の上に「売り切れ」などの文字が入ったの画像を

.soldout {
  position: relative;
}
.soldout:after {
  content: ""
  display: block;
  background: (soldout.png) no-repeat;
  background-size: cover;
  position: absolute;
  top:0;
  left:0;
}

とかで表示した場合。商品画像リンクの上に画像があるためリンクをクリックできませんよね。

こんなときに売り切れ画像をすり抜けてリンクをクリックできるようにするのが pointer-events: none; です。

このスタイルを指定すると目には見えているけどマウスのカーソルは透過するようになります。

※ブラウザの対応状況に注意

スマートフォン向けならば問題ないですが、IE10以下未対応のプロパティです。まだまだIE10以下を使っている人は多いので、PC向けのページでの利用はオススメできません。

jQueryならIE10以下も対応

CSSのpointer-events: none;はIE10以下は機能しない。ならばjQueryで実装する手もあります。

.soldout:afterの部分に透過させたい要素のクラス名を記述

<!--jQuery読込-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
<!--クリック無効化-->
<script>
$(function(){
    $('.soldout:after').click(function(){
       return false;
    })
});
</script>

上記のタグを<head>内に記述すればOKです。

IE11～Edgeが主流になるまではjQueryでの実装がベストかと思います。