CODEWITHSUNDEEP
reactjs
al_rus
al_rus

Reputation: 107

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

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.

Upvotes: 0

Views: 35

Answers (1)

Kevin.a
Kevin.a

Reputation: 4296

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

This can be done with CSS

Upvotes: 1

Related Questions