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

94

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

CSS：

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

css

— 德拉古特
source

@PHPglue两件事：w3fools.com，即使它只是页面中的该元素，它也实际上不起作用：jsfiddle.net/brh9r8h6

— melancia 2014年

121

使用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）
source

您的代码有效，除非我删除其父标记，但它位于<div> <li> <span>中，在这种情况下，它仍然是默认光标

— Dragut

@ user3721912您介意提供示例吗？那会有所帮助。

— Josh Crozier 2014年

是的，这正是我要说的，我的意思是我的span标签不孤单，它有<div> <li>个父母，它被<div> <li>标签包围

— Dragut 2014年

22

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

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

CSS：

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

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

CodePen示例

编辑：

Chrome浏览器已开始着重于单击具有tabindex属性（甚至具有tabindex =“-1”）的元素。最快的解决方案是将onfocus="this.blur()"元素设置为散焦。
您需要避免聚焦元素，否则可以通过输入键激活它

— 彼得·奥杜特
source

效果很好！聪明。谢谢

— Joe Dooley

被低估的答案！谢谢！

— trpx

干净，简单，最重要的一点就是正确！谢谢！

— 达扎格

13

通过指定，pointer-events:none您正在积极地声明元素和光标之间没有鼠标交互。因此，它也不能有光标-所有鼠标行为都不可见。

证明可以在这里找到。

— 尼尔斯·库伦杰斯（Niels Keurentjes）
source

再次，不良的逻辑证明了这一点。假设您确实要进行鼠标交互，但是您正在用JavaScript自己实现。或者，您不使用JavaScript，而是想要设置诸如textarea调整大小之类的样式的样式，将<->光标添加到右下角，但是您不希望这样做阻止基本的调整大小功能，因此可以进行指针事件：没有；但是删除了光标。糟糕的逻辑。我看不到这是对这个问题的答案。

— 乔治，

4

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

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

如果您不知道JavaScriptanchorElement是节点或元素本身。获取元素的最常见方法是使用HTMLid属性。假设我们有：

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

您的代码可能是：

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

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

— 从站
source

看来合乎逻辑，但我对JavaScript并不了解。如果您显示用法示例，那就太好了

— Dragut 2014年

0

我的用例是一个可拖动元素，它不能有任何指针事件或任何带有指针事件的父元素。

我通过有条件地应用全局样式（仅在拖动时才强制抓住光标）解决了该问题。（我使用React和样式化组件，但是相同的逻辑可以应用于vanilla js）。

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

— 卢卡斯·贾农（Lucas Janon）
source

0

您可以创建另一个div并将其精确地放置在最后一个div上，并制作如下的CSS：

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

— 普里克斯
source

0

除了包装，也可以从内部使用纯CSS来完成。（我将其与实质性的Web组件一起使用，因此代码变得更加复杂。）

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

我也试过::before和::after与button:disabled直接，但就是无法做到这一点？

— 波尔夫
source