I am facing an issue with my container div that has an inset drop shadow applied to it. Inside this container, I have child elements and I want these children to be clickable.
For the drop shadow to show, it is necessary to set the z-index of the child elements (which are images in my project) to -1. However, this causes the container to cover the child elements, making them unclickable.
Even setting pointer-events: none; on the container element did not solve the issue (I also need the container to be scrollable).
$('.item').on('click', function() {
alert($(this).attr('id'));
}); .container {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
box-shadow: inset 0 0 10px black;
overflow-y: scroll;
overflow-x: hidden;
}
.item {
width: 250px;
height: 80px;
margin: 3px 0;
background-color: #cacaca;
position: relative;
text-align: center;
z-index: -1;
/*Shadow visible, JS doesn't work*/
/*z-index: 0;*/
/*Clickable, but shadow is covered */
}<div class="container">
<div class="item" id="item1">
<p>CLICK</p>
</div>
<div class="item" id="item2">
<p>CLICK</p>
</div>
<div class="item" id="item3">
<p>CLICK</p>
</div>
<div class="item" id="item1">
<p>CLICK</p>
</div>
</div>Is there a way to maintain the shadow effect while ensuring the child elements remain clickable?