Transformer la hauteur de l'enfant div lorsque le vol stationnaire parent div

Question

Je voudrais transform la height de mon .bar-3px en vol stationnaire .wrapper. Je sais que je dois utiliser transition et transform, mais je n'ai aucune idée de comment transform mon enfant div en passant son père. En ce moment, je transform juste mon parent div (c'est clair pourquoi). Comment transformheight de mon enfant en planant mon parent div (devrait être une barre à venir haut/bas sur le bas de)? Notez que le div parent ne devrait pas transformer ses dimensions, juste l'enfant!

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: lightgreen; 
 
    transition: all 1s ease-in-out; 
 
} 
 

 
.wrapper:hover { 
 
    /*ON HOVER WRAPPER TRANSFORM HEIGHT OF BAR TO 3px*/ 
 
    transform: scale(2); 
 
    cursor: pointer; 
 
} 
 

 
.bar { 
 
    width: 100%; 
 
    height: 0px; 
 
    background-color: blue; 
 
} 
 

 
.bar:hover {}

<div class="wrapper"> 
 
    <div class="bar"></div> 
 
</div>

Answer 1

Utilisez le sélecteur d'enfant .wrapper:hover>.bar:

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: lightgreen; 
 
    transition: all 1s ease-in-out; 
 
} 
 

 
.wrapper:hover { 
 
    cursor: pointer; 
 
} 
 

 
.bar { 
 
    width: 100%; 
 
    height: 0px; 
 
    background-color: blue; 
 
    transition: height 200ms ease-in-out; 
 
} 
 

 
.wrapper:hover>.bar { 
 
    height: 3px; 
 
}

<div class="wrapper"> 
 
    <div class="bar"></div> 
 
</div>

Answer 2

Utilisez ce sélecteur CSS > de le faire,

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: lightgreen; 
 
    transition: all 1s ease-in-out; 
 
} 
 

 

 
/*.wrapper:hover { 
 
    transform: scale(2); 
 
    cursor: pointer; 
 
}*/ 
 

 
.bar { 
 
    width: 100%; 
 
    height: 0px; 
 
    background-color: blue; 
 
    transition: 0.6s ease; 
 
} 
 

 
.wrapper:hover > .bar { 
 
    height: 10px; 
 
}

<div class="wrapper"> 
 
    <div class="bar"></div> 
 
</div>