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

Answer 1

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