Question

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

CSS：

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

Answer 1

pointer-events: none将disable all mouse interactions与该元素一起使用。如果要更改cursor属性，则必须将更改应用于父元素。您可以使用元素包装链接并向其添加cursor属性。

Example Here

<强> 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中的文字。

Updated Example

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

Answer 2

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

Proof to be found here

Answer 3

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

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

如果您不知道JavaScript anchorElement是节点或元素本身。获取Element的最常用方法是使用HTML id属性。我们说我们有：

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

你的代码可能是：

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

还有很多其他方法可以获取节点。

Answer 4

坦率地说，上述解决方案都无法解决我遇到的问题（可能是因为我缺乏理解或执行不力）。但是，最终结果非常简单：

在我的html页面中，我试图禁用链接（实际上是菜单项），同时让用户知道链接已被禁用。

html的相关部分是：

{% if user.is_authenticated %}
    <a ...some_action_here..... </a>
{% else %}
    <li class="nav-item">
        <a class="nav-link" title="No User logged in currently" href="#">No User</a>
    </li>
{% endif %}

我的目标是通知用户尚未登录（例如说“无用户”）：

步骤1：现在，我的目标将是禁用链接，并“直观地”通知用户否点击事件上的“操作” 是允许的。

有一种简单的方法可以通过在css中声明以下内容来实现：

.disable-event {
    pointer-events: none;
}

但是，它所做的只是“禁用”链接项（此处为“ 没有用户”），当用户尝试“点击”链接而不告知原因（或如果链接确实是“ 已死”）。

查看图片：

步骤2：为了直观地通知用户，我们具有鼠标光标属性cursor: not-allowed;

在这一步中，我在html代码（更新代码如下所示）中声明了“包装器”元素“ 不允许”-

<li class="nav-item disallow">
    ....
<li>

并在我的CSS中创建与以下内容相同的内容：

.disallow {
    cursor: not-allowed;
}

最后，我的css和html代码如下：

CSS：

<style>
....
....
.disallow {
    cursor: not-allowed;
}

.disable-event {
    pointer-events: none;
}
....
....
</style>

HTML：

{% if user.is_authenticated %}
    <a ...some_action_here..... </a>
{% else %}
    <li class="nav-item disallow">
        <a class="nav-link disable-event" title="No User logged in currently" href="#">No User</a>
    </li>
{% endif %}

要记住的重要要点是不要将两个类都放在同一个标记中。首先将鼠标光标渲染到“ not-allowed”。然后只有禁用链接（使用“ pointer-events”）。将类放在相同的标签中将不会具有预期的效果（仅“禁用”链接 BUT 鼠标光标将保持“默认”）。

这是结果：

Answer 5

距离最初的问题已经很久了，但这是我的解决方案，没有任何包装元素和没有指针事件的光标：

<!-- 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;
}

Answer 6

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

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

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

// ...

{isDragging && <SetDraggingCursor />}

Answer 7

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

const schema = {
    str: { type: 'string' },
    nbr: { type: 'number' },
    bool: { type: 'boolean' },
    date: { type: 'date' },
    strs: { type: ['string'] },
    obj: { type: 'object' },
} as ISchema;

Answer 8

也可以使用纯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，但无法实现...

使用＆＃34;指针事件时添加CSS游标属性：无＆＃34;

8 个答案: