悬停时展开当前 div 并缩小其他 div答案

【问题标题】：Expand current div on hover and shrink others悬停时展开当前 div 并缩小其他 div
【发布时间】：2018-01-26 22:28:32
【问题描述】：

我正在学校做一个项目，我想在网页上显示某种幻灯片。我已经到了一个我不知道如何进行的地方。这是我到目前为止得到的：

body {
  background-color: #252525;
}

#wrapper {
  width: 90%;
  margin: 0 auto;
  padding: 2%;
}

#images {
  width: 100%;
  height: 300px;
  text-align: center;
  overflow: auto;
}

#container-1 {
  display: inline-block;
  background-color: #fff;
  width: 100px;
  height: 300px;
  transition: .5s ease-in-out;
}

#container-1:hover {
  background-color: #189fff;
  width: 80%;
  height: 300px;
}

.container {
  width: 100px;
  height: 300px;
  background-color: #fff;
  display: inline-block;
  transition: .5s ease-in-out;
}

.container:hover {
  background-color: #189fff;
  width: 80%;
  height: 300px;
}

<div id="wrapper">
  <div id="images">
    <div id="container-1"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
  </div>
</div>

我希望这样做是因为每当我悬停其中一张图片（如果您愿意，也可以是 div）时，它会展开并显示整个图片。有两张图像，一张是剪辑的，一张是整个图像。（也许那是件坏事？）

类容器只是临时获取其外观的图像并为其他 div 提供背景颜色。在#container-1:hover 中，width 并不是我要使用的那个。它可能与我使用的图像不同。

另外，如果我不使用overflow: auto;，其他 div 将被推到其他 div 下方，这是我不想要的。

代码以某种方式按我想要的方式工作。我真正遇到的唯一问题是，当我将其中一个 div 悬停时，它会将其他 div 推到一边，从而产生冲突。有没有办法让这种情况不发生？当当前的 div 悬停在上面时，也许可以减少其他 div 的宽度？

我最近刚开始使用 JavaScript，所以我对它的经验还很差，但我愿意接受建议，但遗憾的是，我们不允许使用 jQuery 或类似的东西。

这里是它的一个小提琴：jsfiddle

【问题讨论】：

标签： javascript html css

【解决方案1】：

您的问题是，当其中一个元素悬停并展开时，所有元素的总和超过了容器的宽度，并且最后一个或两个元素被推到其他元素下方（进入下一行）。

为避免仅使用 CSS，您必须选择 width 值，其中三个默认元素和一个展开（悬停）元素一起不超过容器的 100%，就像在这个小提琴中一样：

https://jsfiddle.net/kju94h1n/

若要在悬停另一个元素时使非悬停元素变窄，则需要 Javascript。

【讨论】：