With three divs, each containing two child elements, the challenge is to display the second child (hidden & absolutely positioned) upon hovering over the first child. While it may seem straightforward, the issue arises when the absolute positioning causes the second child to hide behind the next sibling of the parent element.
https://i.sstatic.net/LD5GM.png
I have attempted various approaches, including dynamically adjusting z-index, but without success. My goal is to achieve this using CSS exclusively.
.wrapper{
width: 100%;
display: flex;
}
.div{
margin: 0em 1em;
position: relative;
}
.divIn{
width: 190px;
height: 260px;
background: red;
}
.divHover{
display: none;
position: absolute;
left: 0%;
bottom: 2em;
width: 500px;
height: 100px;
background: black;
}
.divIn:hover ~ .divHover, .divHover:hover{
display: block;
}
.clearfix{
clear: both;
}
<div class="wrapper">
<div class="div">
<div class="divIn"></div>
<div class="divHover"></div>
</div>
<div class="div">
<div class="divIn"></div>
<div class="divHover"></div>
</div>
<div class="div">
<div class="divIn"></div>
<div class="divHover"></div>
</div>
<div class="clearfix"></div>
</div>
When hovering over the first element, the hidden second element should be displayed without going behind the next sibling of the parent.