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

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

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

CSS:

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

使用pointer-events: nonedisable 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;
}
53

这是 pretty 很长,因为原来的问题,但这是我的解决方案没有任何包装元素和光标没有指针事件:

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

CSS:

/* Adding cursor just works: */
a[aria-disabled="true"] {
    cursor: not-allowed;
}
/* Makes link non-clickable: */
a[aria-disabled="true"]:active {
    pointer-events: none;
}
CodePen Example EDIT:

Chrome 已经开始在具有 tabindex 属性的元素上添加焦点(即使 tabindex =“-1”)。最快的解决方案是将onfocus="blur()"设置为 unfocus 元素。

您需要防止聚焦元素,否则它可以通过输入键激活

EDIT2

class="disabled"替换为aria-disabled="true"以满足 a11y;)

13

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

Proof to be found here.
4

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

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

如果您不知道 JavaScriptanchorElement是 Node 或 Element 本身。获取 Element 的最常见方法是使用 HTMLid属性。假设我们有:

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

您的代码可能是:

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

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

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(657)
消息“警告:函数的隐式声明”(implicit declaration of function c)
上一篇
3X3棋盘上移动的 NFA的实现
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(74条)