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: none と cursor: 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で押さえつけるという姑息な手段で使ってしまわないよう、他の手段を考えてみるのもいいかもしれません。