pointer-events:noneするとcursorプロパティが効かないのを回避する

このブログのトップページのページャーで、disabledになっているボタンにhoverしたとき、cursorをnot-allowedにしようとしたら効かなかった。何故だ…

やろうとしたこと

<a class="btn disabled">ボタン</a>
.btn.disalbed {
  pointer-events: none;
  cursor: not-allowed; /* ← 効かない */
}

ボタン

同じclassにpointer-events: nonecursor: not-allowedを指定してボタンにホバーしても、カーソルが禁止マークにならない。pointer-eventsの動作ははカーソルにまで及んでしまうらしい。

解決方法

ボタンをdivか何かで囲ってあげて、外側の要素にpointer-events: noneを、ボタン本体にcursor: not-allowedを指定すればOKです。

<div class="btn-wrapper disabled">
  <a class="btn">ボタン</a>
</div>
.btn-wrapper.disalbed {
  cursor: not-allowed; /* ← 効かない */
}
.btn {
  pointer-events: none;
}
ボタン

余談

とは言っても、これだけの為にわざわざ、もう一つ要素増やして囲みたくなんかないわボケェ!って感じですよね。腑に落ちない。

自分がpointer-events: noneを指定する理由は、hover時に背景色がつくのを取りやめたい、というだけものだったので、結局、disabledボタンにhoverしたときは、background: noneにする、という方法で対処しました。

pointer-eventsは便利なプロパティなのですが、JSやその他諸々の動作をCSSで押さえつける、わりと姑息な手段のような気がする(偏見)ので、そもそも何でpointer-eventsを使いたいのか今一度考える方がいいかもしれないです。