CSSカーソル:not-allowedとpointer-events:none;をどのように組み合わせることができますか?許可されていないようです
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
<button class="cursor-default">cursor-default</button>
<button class="cursor-not-allowed">cursor-not-allowed</button>
<button class="pointer-events-none">pointer-events-none</button>
<button class="cursor-not-allowed pointer-events-none">cursor-not-allowed + pointer-events-none</button>
小さなサンプル、4番目のボタンカーソルを見てください。許可されていないボタンは表示されませんでしたが、見た目のアイコンが表示されます。
pointer-events: none;
すべてのマウス機能を無効にしますが、トリックを実行してボタンをdiv
でラップしてからcursor: not-allowed;
これ。
.pointer-events-none {
pointer-events: none;
}
.wrapper {
cursor: not-allowed;
}
<div class="wrapper">
<button class="pointer-events-none">Some Text</button>
</div>