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

Question

我正在尝试禁用特定链接并应用光标样式,但此CSS命令cursor: text;不会生效.光标始终是默认的.我正在使用最新的Firefox版本.

CSS:

pointer-events: none !important;
cursor: text;
color: Blue;

Answer 1

使用pointer-events: none将禁用与该元素的所有鼠标交互.如果要更改cursor属性,则必须将更改应用于父元素.您可以使用元素包装链接并将cursor属性添加到该链接.

这里的例子

HTML

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

但是,有一些浏览器不一致.为了在IE11中工作,看起来你需要一个伪元素.伪元素还允许您选择FF中的文本.奇怪的是,您可以在没有它的情况下在Chrome中选择文本.

更新的示例

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

Answer 2

通过指定pointer-events:none您正在主动声明元素和光标之间没有鼠标交互.因此它也不能有光标 - 它对所有鼠标行为都是不可见的.

证明可以在这里找到.

Answer 3

自原始问题以来已经很久了，但这是我的解决方案，没有任何包装元素和没有指针事件的游标：

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a tabindex="-1" href="url" class="disabled">Disabled link</a>

CSS：

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}