0

The best way I know to make a div not clickable with CSS is to use:

  pointer-events: none,

But then the cursor will always be the default one:

pointer-events: none;
cursor: not-allowed; // THIS WON'T DO ANYTHING

Is there a way to achieve both in CSS (and hopefully without Javascript)? Setting just the cursor will show the div as not clickable while it still is.

sir-haver
  • 3,096
  • 7
  • 41
  • 85

1 Answers1

0

One thing you can do is use the :before pseudo-element to create an invisible overlay over the div that prevents clicking. You can also add to this pseudo-element the cursor property not-allowed to visually indicate that the div is not clickable.

Here an example:

/* Optional div style */
div {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: grey;
}

.not-clickable {
  position: relative;
}

.not-clickable:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%
}

.not-clickable:hover:before {
  background-color: rgba(0, 0, 0, 0.1); /* Optional hover effect */
  cursor: not-allowed;
  user-select: none;
}
<div class="not-clickable">You can't click me</div>
Maubry94
  • 1
  • 3