Issue
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
Solution
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 By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.