CODEWITHSUNDEEP
css
Dragut
Dragut

Reputation: 1887

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

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;

Upvotes: 166

Views: 134279

Answers (9)

Koen
Koen

Reputation: 3686

There is simply no way to disable a hyperlink. All attempted solutions for this are hacks that don't work 100%. Eg. pointer-events: none; doesn't do anything when using the keyboard on an anchor.

If you want to disable a hyperlink, you don't want a hyperlink but text that is styled like a disabled hyperlink.

https://css-tricks.com/how-to-disable-links/

Upvotes: 0

Dmitry Shashurov
Dmitry Shashurov

Reputation: 1704

If you want to make the links unactive, and with a custom cursor, do that:

.loading { cursor:wait; }
.loading * { pointer-events:none; }
<span class="loading">
    <a href="#">Link</a>
</span>

Upvotes: 3

Petr Odut
Petr Odut

Reputation: 1787

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

Upvotes: 72

Polv
Polv

Reputation: 2208

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

Upvotes: 0

pouorix
pouorix

Reputation: 21

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

Upvotes: 0

Lucas Janon
Lucas Janon

Reputation: 1612

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

Upvotes: 0

StackSlave
StackSlave

Reputation: 10627

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.

Upvotes: 4

Josh Crozier
Josh Crozier

Reputation: 240888

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

Upvotes: 180

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

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.

Upvotes: 13

Related Questions