在悬停时将一个 div 扩展到另一个 div 上并带有过渡

Question

我将 div 设置为列样式

[div1][div2][div3]

我想像这样在光标悬停时单独展开每个 div（以某种方式覆盖其他 div）：

[div1..................]

到目前为止，我的工作方式是这样的：https://codepen.io/Cigoler/pen/VMZeaB

body {
  background: #cacaca;
  padding: 5em;
}

.container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.item {
  padding: 0.25em;
  text-align: center;
  display: inline-block;
  width: 33%;
  height: 200px;
  background: whitesmoke;
  vertical-align: middle;
}

.item:hover {
  cursor: pointer;
  position: absolute;
  left: 0;
  width: 100%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.test1 {
  background: #c3c3c3;
}

.test2 {
  background: #fafafa;
}

.test3 {
  background: #474747;
  color: white;
}

<div class="row expanded">
  <div class="container">
    <div class="item test1">
      <p>Test One</p>
    </div>
    <div class="item test2">
      <p>Test Two</p>
    </div>
    <div class="item test3">
      <p>Test Three</p>
    </div>
  </div>
</div>

问题是；我想更进一步并顺利地为过渡设置动画。但是，每当我添加一个简单的过渡时，它都会变得很笨拙。我猜这是因为浏览器在动画之间的 div 之间发生了冲突。

对解决这个问题有什么帮助吗？

Answer 1

您可以使用基于flexbox 的CSS3 解决方案来代替定位 -

1. 将display: flex 添加到container

2. 将min-width: 0 添加到item 和flex: 1 1 0%，将flexbox 设置为grow 和shrink，因为它看起来合适并设置一个flex-basis 为零。

3. 将flex-basis: 100%添加到item:hover并删除绝对定位

请看下面的演示：

body {
  background: #cacaca;
  padding: 5em;
}

.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex; /* ADDED */
}

.item {
  flex: 1 1 0%; /* ADDED */
  min-width: 0; /* ADDED */
  /*padding: 0.25em;*/
  text-align: center;
  display: inline-block;
  width: 33%;
  height: 200px;
  background: whitesmoke;
  vertical-align: middle;
}
.item:hover {
  cursor: pointer;
  /*position: absolute;*/
  /*left: 0;*/
  flex-basis: 100%; /* ADDED */
  -webkit-transition: flex-basis 0.3s ease-out; /* MODIFIED */
  transition: flex-basis 0.3s ease-out; /* MODIFIED */
}

.test1 {
  background: #c3c3c3;
}

.test2 {
  background: #fafafa;
}

.test3 {
  background: #474747;
  color: white;
}

<div class="row expanded">
  <div class="container">
    <div class="item test1">
      <p>Test One</p>
    </div>
    <div class="item test2">
      <p>Test Two</p>
    </div>
    <div class="item test3">
      <p>Test Three</p>
    </div>
  </div>
</div>

Answer 2

您可以尝试将div.item默认设置为绝对位置。然后在悬停时更改div的宽度和左侧位置

一个样本

body {
  background: #cacaca;
  padding: 5em;
}

.container {
  position: relative;
  width: 100%;
}

.item {
  padding: 0.25em;
  text-align: center;
  display: inline-block;
  width: 33%;
  height: 200px;
  background: whitesmoke;
  vertical-align: middle;
  position: absolute;
}
.item:hover {
  cursor: pointer;
  left: 0;
  width: 100%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 999;
}

.test1 {
  background: #c3c3c3;
  left: 0px;
}

.test2 {
  background: #fafafa;
  left: 33%;
}

.test3 {
  background: #474747;
  color: white;
  left: 66%;
}

<div class="row expanded">
<div class="container">
  <div class="item test1">
    <p>Test One</p>
  </div>
  <div class="item test2">
    <p>Test Two</p>
  </div>
  <div class="item test3">
    <p>Test Three</p>
  </div>
</div>
</div>