使用“指针事件:无”时添加CSS光标属性

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

CSS:

pointer-events: none !important;
cursor: text;
color: Blue;
Dragut asked 2019-10-09T11:26:22Z
3个解决方案
76 votes

使用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的情况下选择Chrome中的文本。

更新示例

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}
Josh Crozier answered 2019-10-09T11:26:55Z
9 votes

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

证明在这里找到。

Niels Keurentjes answered 2019-10-09T11:27:32Z
2 votes

删除pointer-events: none !important;。使用JavaScript禁用链接:

anchorElement.onclick = function(){
  return false;
}

如果您不知道JavaScript anchorElement是Node或Element本身。 获取元素的最常见方法是使用HTML id201属性。 假设我们有:

<a id='whatever' href='#'>Text Here</a>

您的代码可能是:

document.getElementById('whatever').onclick = function(){
  return false;
}

还有许多其他获取节点的方法。

StackSlave answered 2019-10-09T11:28:17Z
translate from https://stackoverflow.com:/questions/25654413/add-css-cursor-property-when-using-pointer-events-none