javascript - 悬停时展开当前 div 并缩小其他 div

Question

我在学校做一个元素，我想在网页上放一些幻灯片。我已经到了一个我不确定如何进行的地方。这是我到目前为止得到的:

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 或类似的东西。

这是一个 fiddle :jsfiddle

Answer 1

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

为避免仅使用 CSS，您必须选择 width 值，其中三个默认元素和一个扩展(悬停)元素加在一起不超过容器的 100%，如以下 fiddle 所示:

https://jsfiddle.net/kju94h1n/

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