悬停在 parent div 上时变换 child div 的高度

Question

我想在悬停 .wrapper 时 transform 我的 .bar 的 height 到 3px。我知道我必须使用 transition 和 transform，但我不知道如何通过悬停他的 parent 来 transform 我的 child div。目前，我 transform 只是我的 parent div（原因很清楚）。如何通过悬停我的 parent div 来 transform height 我的 child （应该是 [=20 底部的 up/down 栏=])?请注意 parent div 不应该变换 他的尺寸，只是 child!

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

悬停在 parent div 上时变换 child div 的高度

Transform height of child div when hover on parent div

html

css

css-transitions

css-transforms