悬停在父 div 上时变换子 div 的高度

Question

当悬停.wrapper 时，我想将我的.bar 的transform height 转为3px。我知道我必须使用transition 和transform，但我不知道如何通过悬停他的父母来transform 我的孩子div。目前，我transform 只是我的父母div（原因很清楚）。如何通过将我的父母div 悬停在我的孩子的transform height 上（应该是在.wrapper 底部向上/向下的条形）？请注意，父 div 不应该改变他的尺寸，只有孩子！

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