web-dev-qa-db-ja.com

カーソルを結合する方法：許可されないイベントとポインターイベント：なし。

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番目のボタンカーソルを見てください。許可されていないボタンは表示されませんでしたが、見た目のアイコンが表示されます。

csscss3cursor
12
twyly

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>

「pointer-events：none」を使用するときにCSSカーソルプロパティを追加

22
Pedram