如何组合游标：not-allowed和pointer-events：none;

Question

如何组合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>

小样本，请看第四个按钮 cursor：not-allowed看不到按钮，但显示一个看起来的图标。

Answer 1

你不能这样做是因为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>

Add CSS cursor property when using "pointer-events: none"