Javascript 如何在悬停时展开容器中的每个子元素？

我有一个flex box容器，其中有几个子元素，每个子元素都有class.flex项。我的网格系统是这样的，每行有3个flex项，每个项占容器宽度的1/3

<div class="flex-box">

    <!-- start row 1 -->
    <div class="flex-item">[image and text]</div>
    <div class="flex-item">[image and text]</div>
    <div class="flex-item">[image and text]</div>
    <!-- end row 1 -->

    <!-- start row 2 -->
    <div class="flex-item">[image and text]</div>
    <div class="flex-item">[image and text]</div>
    <div class="flex-item">[image and text]</div>
    <!-- end row 2 -->

</div>

[图像和文本]
[图像和文本]
[图像和文本]
[图像和文本]
[图像和文本]
[图像和文本]

所需功能：
悬停时，我需要将每个flex项的宽度增加一倍，而不移动任何同级项。
**例如，如果我将鼠标悬停在第一个子项上，它将完全覆盖第二个子项；第三个弹性项将保持不变。
**类似地，如果我将鼠标悬停在第5个flex项上，它的宽度将扩展到第6个flex项，而所有其他flex项都保持不变

我所尝试的：
我的第一种方法是纯CSS，使用a）位置：绝对，b）左/右偏移，c）左边距的组合。但是，我遇到了一些问题，无法始终如一地准确设置行中其他兄弟姐妹的“剩余边距”属性。而且，这只适用于第一排。对于所有其他行，我需要计算顶部偏移，因为我使用的是绝对定位

有更好的纯CSS方法吗？如果除了CSS之外，我还应该使用一些JS/jquery，我该怎么做呢

---

更新：这里是我创建的一个JSFIDLE，通过使用第一个flex项作为示例来显示所需的功能：

为了实现在其他元素上进行缩放的效果，我想使用

position:absolute的CSS-only方法这是可行的

OBS：我只想说，使用3列和绝对定位的问题是33%的宽度问题，最终你必须决定如何填充剩余的1%或做些什么

解决方案

您的子元素绝对定位为
width:33%
还有第二个孩子是
左：33%：
等等

悬停时，将宽度加倍至
66%
，并将“z指数”更改为足够高的数字

解决容器外部的第三个元素悬停增长问题，您可以将其左移到
33%
，这样它将在中间元素上增长，而内容仍将在父元素内部

我管理了一个关于这个的工作演示，如下所示：

您将拥有正常的HTML：

<ul class="container-box">
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
</ul>

为了达到在其他元素上进行缩放的效果，我想只使用CSS的方法是
position:absolute这是可行的

OBS：我只想说，使用3列和绝对定位的问题是33%的宽度问题，最终你必须决定如何填充剩余的1%或做些什么

解决方案

您的子元素绝对定位为
width:33%
还有第二个孩子是
左：33%：
等等

悬停时，将宽度加倍至
66%
，并将“z指数”更改为足够高的数字

解决容器外部的第三个元素悬停增长问题，您可以将其左移到
33%
，这样它将在中间元素上增长，而内容仍将在父元素内部

我管理了一个关于这个的工作演示，如下所示：

您将拥有正常的HTML：

<ul class="container-box">
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
</ul>

如果您将第三项悬停，会发生什么情况？是期望内容变为填充内容，还是您只是尝试缩放内容？另外，您的CSS当前看起来是什么样的？考虑设置一个JS小提琴，它也会加倍它的宽度，除了第三个项目将扩大到右边，完全覆盖第二个项目。如果你悬停第三个项目会发生什么？是期望内容转移到填充还是你只是试图缩放你的内容？另外，您的CSS当前看起来是什么样的？考虑设置一个JS小提琴，它也会加倍它的宽度，除了第三个项目将扩大到右边，完全覆盖第二个项目。这正是我的想法，但只占3个子项目。如果我有一个容器，比如说9个子项，共有3行，我的方法是什么？@manh2244是否需要它们位于同一个父项中？如果不是的话，ul元素可以像
行
一样，为的是，这正是我所想的，但只占3个子项。如果我有一个容器，比如说9个子项，共有3行，我的方法是什么？@manh2244是否需要它们位于同一个父项中？如果没有，ul元件的作用类似于