悬停时扩展当前 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>

我想这样做的是，每当我将鼠标悬停在其中一个图像(或divs，如果您愿意)时，它就会展开并显示整个图像。有两个图像，一个是剪辑的，另一个是整个图像。(也许这是一件坏事？

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

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

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

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

这是它的一个小提琴：jsfiddle

Answer 1

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

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

https://jsfiddle.net/kju94h1n/

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