CSSのcursor:pointerが効かない時にまず確認したい3つのこと

ボタンやタブなど、コンテンツがクリックできる部分に設定する機会の多いcursor:pointer。
設定しているはずなのに、カーソルが変わらないということもたまにあるのではないでしょうか？
今回はそんな時にまず確認したい3つのことをご紹介いたします！

要素が被ってしまっていないかを確認

まず確認をしたいよくやってしまいがちなミスは、他の要素が上に被ってしまっていることです。
ボタンの上に要素が被ってしまっていると、cursor:pointer以前にボタン自体クリックすることができなくなってしまいます。
特にpositionを使って装飾を入れたり、コンテンツを重ね合わせるレイアウトを作成する際には要素の重なりを確認してみましょう！

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

z-indexについての記事はこちら

CSS

2021.11.02

CSSのcursor:pointerが効かない時にまず確認したい3つのこと

ボタンやタブなど、コンテンツがクリックできる部分に設定する機会の多いcursor:pointer。設定しているはずなのに、カーソルが変わらないということもたまに…

画像にしたい場合は記述が合っているかを確認

カーソルを画像にしたい場合、画像のURLだけを書いても置き換わりません。
見落としがちな記述ですが、必ずURLの後ろにpointer（画像が表示できないときに備えたプロパティ）を記述しましょう！

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

きちんとプロパティを書いているのに反映されない場合は画像の大きさを確認してみてください。
ブラウザにより大きさは異なりますが、Firefoxでは128px × 128px、IEでは32px × 32pxより大きい画像が設定されている場合は画像が無視されデフォルトのカーソルになってしまいます。

それでも治らない時はPhotoshopを開いているか確認

記述は合っているのに効かない…という場合はPhotoshopを開いているかを確認してみてください！
実は、Photoshopを開いているとcursor:pointer;が効かなくなるというバグがあります。
2016年ごろから発生しているバグですが、まだ解決しておらず、Google Chrome、Firefox、Safariで発生することが確認されています。
また、意図的に再現することが難しいためPhotoshopを閉じる以外に今のところ解決方法はありません。

意外な組み合わせですが、よく見かけるバグの一つです。
作業の区切りが良い時に一旦Photoshopを閉じて確認してみてください！

まとめ

aタグやbuttonタグ以外でボタンを作る時はcursor:pointerを設定するようにしていますが、Photoshopを開いているせいで確認ができないことはよくあります…。
早くこのバグは改善されるといいですね！笑

マウスカーソルについてのおすすめ記事はこちら

CSS

2021.11.02

CSSのcursor:pointerが効かない時にまず確認したい3つのこと

ボタンやタブなど、コンテンツがクリックできる部分に設定する機会の多いcursor:pointer。設定しているはずなのに、カーソルが変わらないということもたまに…