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;。它可能与我正在使用的图像不同。

此外，如果我不使用this，其他div将被推到其他div之下，这是我不想要的。

代码在某种程度上可以正常工作。我得到的唯一问题是，当我将其中一个div移动时，它会将其他div推到一边，造成冲突。有没有办法让这种情况不发生？也许是一种在当前div被徘徊时减少其他div的宽度的方法？

我最近刚刚开始使用JavaScript，所以我对它没有太多经验，但我愿意接受建议，但我们不允许使用jQuery或类似的东西。

这是一个小提琴：jsfiddle

Answer 1

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

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

https://jsfiddle.net/kju94h1n/

当另一个元素悬停时，为了使非悬停元素更窄，需要使用Javascript。

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

1 个答案: