どうも7noteです。aタグのカーソルやイベントを無効にする系のCSSまとめ記事です。

aタグは基本的にはどこか他のページにリンクさせるために使いますが、都合上aタグの標準の効果が邪魔だったり無効化させたい時ってあると思います。

主にクリックイベントを無効化させたり、カーソルを別の物に変えたりすることができるのですが、
私自身もいつも書き方を忘れて調べてはコピペしてるので、よく使うものをまとめました。

aタグの効果を無効化させるのによく使うCSS

下線を消す

a {
  text-decoration: none; /* 下線を無効化 */
}

無効化した下線を出すときはunderlineを書きましょう。

a {
  text-decoration: none; /* 下線を無効化 */
}

a:hover {
  text-decoration: underline; /* マウスホバー時だけ下線を出す */
}

マウスカーソルを指(👆)以外の形にする

a:hover {
  cursor: default; /* マウスホバー時、通常時の矢印(➚)の形にする */
}

ブラウザのデフォルトに合わせるならauto。
逆に指の形にする時は、pointerを指定します。

他のカーソルの形は以下のサイトを参考にしてください。
https://developer.mozilla.org/ja/docs/Web/CSS/cursor

※次で説明するpointer-events: none;を指定しても、指(👆)の形ではなくすることができます。

クリックイベントを無効にする（ページリンクを無効化）

a {
  pointer-events: none; /* 押してもリンクさせない */
}

たとえば特定のチェックボックスにチェックが入っていなければ、次のページには行けないようにしたり、
aタグにjavascriptの処理を入れてしまっていて、ページリンクさせたくない時などに使えます。

標準に戻すときは、autoを指定してください。

おまけ：タブ移動でフォーカスが当たるのを無効にする

<a tabindex="-1">リンク</a>

参考：http://freeladay.com/?p=2273

まとめ

大きめの開発の際に、たまに出てくるか出てこないかくらいで忘れがちな事が多いので自分の備忘録的な役割も込めて記事にまとめました。
下線の無効化などは、colorの指定と一緒にreset.css（全ページ共通のCSS）などで予め定義されている場合が多いので大丈夫ですが、pointer-eventsやcursorはたまにしか出てこないのでスペルミスで余計な時間を使うくらいであれば、どこかにストックかお気に入りしておいてすぐにコピペで使えると効率アップに繋がるかもしれませんね。

おそまつ！