如何组合游标：不允许和指针事件：none；

Question

如何组合 CSS cursor: not-allowed 和 pointer-events: none; not-allowed 好像没有出现

.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"