How to apply pointer-events for only one underneath element

Question

I have below code:

          <div className="my-div" />
              <button className="my-btn1">this button should be clickable</button>
              <button className="my-btn2">this button should not be clickable</button>
          </div>

The position of .my-div is relative and button's are absolute. If I set pointer-events:none for .my-div, both of buttons would be clickable, but I want .my-btn1 be clickable and .my-btn2 don't be clickable.

The HTML attribute [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) isn't sufficient? If not, why not set `pointer-events: none` for `my-btn2` instead of `my-div`? — Tim R, Aug 23 '23 at 06:21
If the buttons are positioned on top of each other, how do you expect the bottom button that isn't visible to be clicked? — Tim R, Aug 23 '23 at 06:28
buttons are in different positions, both of them are visible. — Subhan Shamsoddini, Aug 23 '23 at 06:31
Again, why not set `pointer-events: none` for my-btn2 instead of my-div? — Tim R, Aug 23 '23 at 06:32
Because I have my-btn3, my-btn4, .... and I want to my-btn1 should be clickable and others not be clickable. — Subhan Shamsoddini, Aug 23 '23 at 06:35
It would be helpful if you described your use case in more detail. Without understanding the use case, it is unlikely you'll get a satisfactory answer. — beerwin, Aug 23 '23 at 11:59
Yes you're right, this code is simplified version of my use case I had a complicated one. anyway I resolved that in another way. @beerwin — Subhan Shamsoddini, Aug 25 '23 at 08:04

score 1 · Answer 1 · answered Aug 23 '23 at 06:45

Declaring pointer-events: auto on my-btn1 appears to allow it to be clickable

.my-div {
  position: relative;
  pointer-events: none;
}

button {
  position: absolute;
  cursor: pointer;
}

.my-btn1 {
  pointer-events: auto;
}

.my-btn2 {
  right: 0;
}

<div class="my-div">
  <button class="my-btn1">this button should be clickable</button>
  <button class="my-btn2">this button should not be clickable</button>
</div>

How to apply pointer-events for only one underneath element

1 Answers1