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

Question

我有一个带有几个子元素的弹性盒子容器，每个子元素都有 .flex-item 类。我的网格系统是这样的，每行有 3 个弹性项目，每个占据容器宽度的 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) 边距左的组合。但是我遇到了为行中的其他兄弟姐妹一致且准确地设置 margin-left 属性的问题。此外，这只适用于第一行。对于所有其他行，我需要计算顶部偏移量，因为我使用的是绝对定位。

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

更新：这是我创建的一个 JSFiddle，以第一个 flex 项目为例，展示了所需的功能：https://jsfiddle.net/4800pwru/

Answer 1

为了实现在其他元素上缩放的效果，我想position: absolute; 的纯 CSS 方法是可行的。

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

解决方案

您的子元素绝对定位为width: 33%;，第二个子元素将是left: 33%:，依此类推。

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

解决第三个元素hover在容器外生长的问题，你可以将它的左边改为33%，这样它就会在中间元素上生长，内容仍然在父元素内。

我在jSFiddle 上管理了一个工作演示，如下所示：

您将拥有正常的 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 将是（在这里使用 normalize.css 和 scss）：

ul.container-box {
  width: 100%;
  min-height: 100px;
  position: relative;
}


li.container-box-item {
  background-color: white;
  width: 33%;
  position: absolute;
  height: 100px;
  border: 1px solid;
  transition: all 0.2s ease-in-out;

  &:hover {
    width: 66%;
    z-index: 10;
  }

  &:nth-child(n * 1) {
    left: 0;
    background-color:blue;
  }

  &:nth-child(n + 2) {
    left: 33%;
    background-color:green;
  }

  &:nth-child(n + 3) {
    left: 66%;
    background-color:yellow;
  }

  &:nth-child(n + 3):hover {
    left: 33%;
    background-color:yellow;
  }
}