如何在懸停時展開容器中的每個子元素？

Question

我有一個帶有幾個子元素的flex box容器，每個子元素都有.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>

所需功能：
在懸停時，我需要每個彈性項目的寬度加倍，而不移動任何兄弟姐妹。
** 例如 ，如果我將鼠標懸停在第一個子項目上，它將完全掩蓋第二個子項目; 第三個彈性項目將保持不變。
** 同樣 ，如果我將鼠標懸停在第5個彈性項目上，它的寬度將擴展到覆蓋第6個彈性項目，而所有其他彈性項目保持不變。

我嘗試過的：
我的第一種方法是純粹的CSS，使用a）位置：絕對，b）左/右偏移，c）左邊距離的組合。 但是我遇到了問題，一致且准確地為行中的其他兄弟設置了margin-left屬性。 此外，這只適用於第一行。 對於所有其他行，我需要計算頂部偏移量，因為我使用絕對定位。

有更好的純CSS方法嗎？ 如果我除了CSS之外還應該使用一些JS / jquery，我該怎么做呢？

更新：這是我創建的JSFiddle，通過使用第一個flex項目作為示例顯示所需的功能： https ：//jsfiddle.net/4800pwru/

Answer 1

為了達到縮放其他元素的效果，我想一個只有CSS的方法，其position: absolute; 這是可行的。

OBS：我只想說使用3列和絕對定位的問題是33％寬度問題，最終你必須決定如何填補剩余的1％或做些什么。

解

您的子元素絕對定位width: 33%; 還left: 33%:第二個孩子left: 33%:等等。

在懸停時，你將寬度加倍到66% ，並將'z-index'變為足夠高的數字。

解決在容器外部生長的第三個元素懸停，您可以將其更改為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;
  }
}