2 个并排的 div 框，宽度为 50%，高度为 100%，悬停在每个框上时扩展至 100% 填满整个宽度

Question

我试图有 2 个 div 框，每个框宽度为 50%，高度为 100%。在该 div 框内，它就像一个锚链接，我们将鼠标悬停在第一个框（框 A）上，框 A 将从从左到右的 50% 宽度到 100% 宽度。如果我们将鼠标悬停在框 B 上，它也会从右向左过渡并填满宽度 100%。

也许一张图片可以更好地解释..这是初始状态：

然后当鼠标悬停在左边的A框上时：

然后当鼠标悬停在右侧的B框上时：

我不确定如何使用 CSS 或 javascript/jquery 或同时使用两者来执行此操作？如果有人能帮助我，我将不胜感激。

谢谢 ：）

Answer 1

这是使用 Flexbox 的方法。

为了让悬停效果对前一个同级起作用，我颠倒了 HTML 中的顺序。可能有一种更简单的方法可以做到这一点，但我无法破解它..

.container {
  display: flex;
  height: 200px;
  border: 2px solid grey;
  overflow: hidden;
  box-sizing: border-box;
}

.block {
  background: pink;
  flex: 1;
  margin: 10px;
  /* below is styling for demo */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.b {
  order: 2;
}

.block:hover {
  min-width: calc(100% - 20px);
}

.block:first-of-type:hover+.block {
  display: none;
}

<div class="container">
  <div class="block b">B</div>
  <div class="block a">A</div>
</div>