親div上にマウスを置いたときの子divの高さの変換

Question

height私の.barから3pxのときホバリングを入力します。私はtransitionとtransformを使用しなければならないことを知っていますが、私はどのようにtransform私の子供div彼の親をホバリングすることによって考えがありません。現時点では、私はtransform私の親のdiv（それは明らかです）。どのように私の子供のheight私の親をホバリングしてdiv（バーは、.wrapperの底に上/下に来る必要があります）？ 親ディビジョンはの寸法を子供に変換してはならないことに注意してください。

.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

子セレクタ.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

使用このCSSセレクタ>がいることを行うために、

.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>