reactjs - how to make a div hover over another div instead of below

Question

I have a parent div and inside the parent div there are nested divs. What I want to do is when I hover the last child, I want it to hover over the borders of the parent divs instead of under the parent divs.

<div className="parentDiv">
 <div className="childA">
  <div className="childB">
   <div className="childC">
    {conents}
   </div>
  </div>
 </div>
</div>

The css goes here

 .parentDiv {
     display: flex;
     position: relative;
     height: 100%;
     width: 100%;
    }
    
    .childA {
     position: relative;
     width: 100%;
     height: 100%;
    }
    
    .childB {
     position: relative;
     width: 100%;
     height: 100%;
    }
    
    .childC {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 450ms;
    }

.childC:hover {
      transform: scale(2.08);
      position: absolute;
      zIndex: 10;
    },

This is what I have tried so far. But I cant make it hover over the parent div borders.

question from:https://stackoverflow.com/questions/65918655/how-to-make-a-div-hover-over-another-div-instead-of-below

Answer 1

.childC:hover .parentDiv{
    border:2px solid black;
}