How to create a hollow div?

Question

I have 2 overlapping transparent div's with their own buttons and other functionality like this:

.item1{
  height:10rem;
  width:10rem;
  position:absolute;
  border:0.5rem solid red;
  background-color:transparent;
}

.item2{
  height:10rem;
  width:10rem;
  position:absolute;
  top:5rem;
  left:2rem;
  border:0.5rem solid blue;
  background-color:transparent;
}

<div class="item2">
  <button>button 2</button>
</div>

<div class="item1">
  <button>button 1</button>
</div>

but I want the divs to act hollow so that in the above example I can also press button2
is something like this even possible?

Note:
I'm not looking for a workaround divs
for eg. please do not suggest that I use SVG rectangles instead

score 2 · Accepted Answer · answered Jul 19 '22 at 14:46

2

Keep pointer events on the button only

.item1{
  height:10rem;
  width:10rem;
  position:absolute;
  border:0.5rem solid red;
  background-color:transparent;
}

.item2{
  height:10rem;
  width:10rem;
  position:absolute;
  top:5rem;
  left:2rem;
  border:0.5rem solid blue;
  background-color:transparent;
}

div[class] {
  pointer-events: none;
}
button {
  pointer-events: initial;
}

<div class="item2">
  <button>button 2</button>
</div>

<div class="item1">
  <button>button 1</button>
</div>

answered Jul 19 '22 at 14:46

Temani Afif

245,468
26
309
415

1

[This has been asked before](https://stackoverflow.com/questions/3680429/click-through-div-to-underlying-elements) – evolutionxbox Jul 19 '22 at 14:47
ofc! how could I have missed this, thank you! – cak3_lover Jul 19 '22 at 14:48
@evolutionxbox vote to close as duplicate instead of commenting – Temani Afif Jul 19 '22 at 14:48
1

Thanks, I did, but I'm informing you since you didn't. – evolutionxbox Jul 19 '22 at 14:49
@evolutionxbox no need to inform me (or anyone in general), the question can be closed without me. You are simply adding noise to the comment section – Temani Afif Jul 19 '22 at 14:50

How to create a hollow div?

1 Answers1