悬停元素 B 时对元素 A 的过渡效果

Question

我正在努力在 .blue div 上进行转换，同时悬停在父级 - .red div 上。

我想要实现的是一个缓慢的过渡，比如从显示 1 秒：无，到阻塞。

样式表在 SCSS 中并且是嵌套的。有人可以帮帮我吗？

Codepen fiddle

HTML：

<div class='app'>
  <div class='red'>
    <div class="blue"></div>
  </div>
</div>

SCSS：

.app {
  heigh: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .red {
    position: relative;
    background-color: red;
    height: 30rem;
    width: 30rem;
    &:hover {
      .blue {
        display: block;
      }
    }
    .blue {
      display: none;
      height: 10rem;
      width: 10rem;
      position: absolute;
      background-color: blue;
      // transition: 1s; DOESNT WORK
    }
  }
}

Answer 1

.app {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .red {
    position: relative;
    background-color: red;
    height: 30rem;
    width: 30rem;
    &:hover {
      .blue {
        opacity: 1;
      }
    }
    .blue {
      opacity: 0; //add opacity
      height: 10rem;
      width: 10rem;
      position: absolute;
      background-color: blue;
      transition: 1s;
    }
  }
}