Add CSS cursor property when using "pointer-events: none"

Question

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;

Answer 1

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.

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

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.

Updated Example

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

Answer 2

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" 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 has started to add focus on click on elements with tabindex attribute (even with tabindex="-1"). Fastest solution is to set onfocus="blur()" to unfocus element.
• You need to prevent focusing the element otherwise it could be activated by enter key

EDIT 2

• Replaced class="disabled" with aria-disabled="true" to meet the a11y ;)

Answer 3

By specifying pointer-events:none you 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 all mouse behaviours.

Proof to be found here.

Answer 4

Remove pointer-events: none !important;. Disable the link using JavaScript:

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

If you don't know JavaScript anchorElement is the Node or Element itself. The most common way to get an Element is by using the HTML id attribute. Let's say we have:

<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.

Answer 5

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).

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

// ...

{isDragging && <SetDraggingCursor />}

Answer 6

you can create another div and position it exactly on your last div and make a css like these :

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

Answer 7

Rather than wrapper, this can be done with pure CSS from the insides as well. (I use this with material web component, so the code gets a little more complex.)

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

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

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

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

I also tried ::before and ::after with button:disabled directly, but just couldn't make it happen...