pointer-events: none;でクリックを無効にする
pointer-eventsは以下の様なCSSの要素です。
特定のグラフィック要素がポインターイベントの対象になる可能性のある環境 (存在する場合) を設定します
pointer-events: noneでは、
ポインターイベントの対象になる可能性のある環境のを設定をなくす
→クリック、タップで反応する範囲をなくす
→クリック、タップイベントが無効化される
ということになります。
元に戻すには初期値であるautoを指定します。
他の値はSVGの要素に適応する値なので、基本autoとnoneのみを使用します。
注意点としてキー操作は無効されないので、Tabキーなどでフォーカスを合わせると動作してしまいます。
その要素を絶対クリックさせないようにしたい場合はJavaScriptを利用した方がいいと思います。
また、親要素にpointer-events: none を設定し、子要素にpointer-events: autoが設定された場合、子要素のマウスイベントは発生します。
pointer-events: none の利用方法としては、以下の様なものがあります。
画像を保存させない様にする
リンクの無効化(遷移できない様にする)
後ろ側にある要素をクリックできる様にする
codepen
余裕があれば
MDN
参考