CSSでcursor: not-allowedがpointer-events: noneと一緒に機能しない問題の解決方法

1. 親要素に対してpointer-events: noneを設定する: もし対象の要素の親要素にpointer-events: noneを設定している場合、子要素に対するマウスイベントが無効になる可能性があります。親要素に設定されたpointer-eventsの値をautoに変更することで、子要素に対するマウスイベントを有効にすることができます。

.parent-element {
  pointer-events: auto;
}

2. マウスイベントを停止する要素に別の要素を追加する: もしpointer-events: noneを設定した要素にマウスイベントを停止したい要素が含まれている場合、その要素に対して別の要素を追加し、その要素にcursor: not-allowedを設定します。

<div class="parent-element">
  <div class="stop-events"></div>
  <div class="cursor-element"></div>
</div>

.stop-events {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cursor-element {
  cursor: not-allowed;
}

3. JavaScriptを使用してマウスイベントを制御する: CSSだけでは解決できない場合、JavaScriptを使用してマウスイベントを制御する方法もあります。イベントリスナーを追加し、検出したマウスイベントに応じてカスタムのカーソルスタイルを設定することができます。

const element = document.getElementById('target-element');
element.addEventListener('mouseover', () => {
  element.style.cursor = 'not-allowed';
});
element.addEventListener('mouseout', () => {
  element.style.cursor = 'auto';
});