1

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

Improve this question
0

1 Answer 1

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This has been asked before
ofc! how could I have missed this, thank you!
@evolutionxbox vote to close as duplicate instead of commenting
Thanks, I did, but I'm informing you since you didn't.
@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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.