CSS 使用“pointer-events: none”时添加CSS光标属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25654413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add CSS cursor property when using "pointer-events: none"
提问by Dragut
I'm trying to disable a specific link and apply cursor style but this CSS command cursor: text;won't effect. The cursor is always default. I'm using latest Firefox version.
我正在尝试禁用特定链接并应用光标样式，但此 CSS 命令cursor: text;无效。光标始终是默认值。我正在使用最新的 Firefox 版本。
CSS:
CSS：
pointer-events: none !important;
cursor: text;
color: Blue;
回答by Josh Crozier
Using pointer-events: nonewill disable all mouse interactionswith that element. If you wanted to change the cursorproperty, you would have to apply the changes to the parent element. You could wrap the link with an element and add the cursorproperty to it.
使用pointer-events: none将禁用与该元素的所有鼠标交互。如果要更改cursor属性，则必须将更改应用于父元素。您可以使用元素包装链接cursor并向其添加属性。
HTML
HTML
<span class="wrapper">
<a href="#">Some Link</a>
</span>
CSS
CSS
.wrapper {
position: relative;
cursor: text; /* This is used */
}
.wrapper a {
pointer-events: none;
}
There are a few browser inconsistencies, though. To make this work in IE11, it seems like you need a pseudo element. The pseudo element also allows you to select the text in FF. Oddly enough, you can select the text in Chrome without it.
但是，有一些浏览器不一致。要在 IE11 中完成这项工作，您似乎需要一个伪元素。伪元素还允许您选择 FF 中的文本。奇怪的是，您可以在没有它的情况下在 Chrome 中选择文本。
.wrapper:after {
content: '';
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
}
回答by Petr Odut
It's pretty long since original question, but this is my solution without any wrapping element and cursor with no pointer-events:
自原始问题以来已经很久了，但这是我的解决方案，没有任何包装元素和没有指针事件的光标：
<!-- 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:
CSS：
/* Adding cursor just works: */
.disabled {
cursor: not-allowed;
}
/* Makes link non-clickable: */
.disabled:active {
pointer-events: none;
}
EDIT:
编辑：
- Chrome started to add focus on click on elements with tabindex attribute. Fastest solution is to set
onfocus="this.blur()"to unfocus element. - You need to prevent focusing the element otherwise it could be activated by enter key
- Chrome 开始增加对带有 tabindex 属性的元素的点击的关注。最快的解决方案是设置
onfocus="this.blur()"为 unfocus 元素。 - 您需要防止聚焦元素，否则它可以通过输入键激活
回答by Niels Keurentjes
By specifying pointer-events:noneyou are actively declaring that there is no mouse interaction between the element and the cursor. Therefore it cannot have a cursor either - it's invisible to allmouse behaviours.
通过指定pointer-events:none您主动声明元素和光标之间没有鼠标交互。因此它也不能有光标——它对所有鼠标行为都是不可见的。
回答by StackSlave
Remove pointer-events: none !important;. Disable the link using JavaScript:
删除pointer-events: none !important;。使用 JavaScript 禁用链接：
anchorElement.onclick = function(){
return false;
}
If you don't know JavaScript anchorElementis the Node or Element itself. The most common way to get an Element is by using the HTML idattribute. Let's say we have:
如果您不知道 JavaScriptanchorElement是节点或元素本身。获取元素的最常见方法是使用 HTMLid属性。假设我们有：
<a id='whatever' href='#'>Text Here</a>
You code could be:
您的代码可能是：
document.getElementById('whatever').onclick = function(){
return false;
}
There are a number other ways to get Nodes.
还有许多其他方法可以获取节点。
回答by Lucas Janon
My use case was a draggable element that couldn't have any pointer-event nor any parent element with a pointer-event.
我的用例是一个可拖动元素，它既没有任何指针事件，也没有任何具有指针事件的父元素。
I solved it by conditionally applying a global style forcing a grabbing cursor only while dragging. (I'm using React and styled-components, but the same logic can be applied on vanilla js).
我通过有条件地应用全局样式来解决它，仅在拖动时强制抓取光标。（我使用 React 和 styled-components，但相同的逻辑可以应用于 vanilla js）。
const SetDraggingCursor = createGlobalStyle`
* {
cursor: grabbing !important;
}
`;
// ...
{isDragging && <SetDraggingCursor />}
回答by pouorix
you can create another div and position it exactly on your last div and make a css like these :
您可以创建另一个 div 并将其准确定位在您的最后一个 div 上，并制作如下所示的 css：
.example{
background-color: rgba(255, 255, 255, 0); //opacity:0
z-index: 1;
cursor: not-allowed;
}
