https://i.sstatic.net/ZR8M7.png
When applying a hover effect in the image, you can see that the green box appears below. Is there a way to prevent the intersecting part from showing during hovering over the yellow box?
Here is the code snippet:
<div class="container">
<div class="son">
This is a title, while has hovering, I dont should see the green square under
</div>
</div>
.container{
height: 507px;
width: 500px;
background-color: rgba(168,207,69,1);
border-radius: 32px;
margin-top:50px;
z-index:1;
}
.son:hover{
background-color: rgba(255,207,69,0.5);
}
.son{
z-index:2;
position:relative;
top:-20px;
width: 300px;
height:50px;
background-color: rgba(255,207,69,1);
}