如何组合cursor: not-allowed和pointer-events: 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>

​

小示例，请看一下光标的第四个按钮:不允许没有看按钮，而是显示一个看起来像的图标。

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"