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

小样本,请看看第四个按钮光标:不允许没有看按钮,但显示一个看起来的图标.

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>

使用"pointer-events:none"时添加CSS游标属性