使用"pointer-events:none"时添加CSS光标属性. [英] Add CSS cursor property when using "pointer-events: none"

问题描述

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

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:

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

推荐答案

使用pointer-events: none将

Using pointer-events: none will disable all mouse interactions with that element. If you wanted to change the cursor property, you would have to apply the changes to the parent element. You could wrap the link with an element and add the cursor property to it.

此处示例

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的情况下选择文本.

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.

更新示例

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

这篇关于使用"pointer-events:none"时添加CSS光标属性.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！