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%:，依此类推。

在悬停时，您将宽度加倍到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＆amp; 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;
  }
}

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

1 个答案: