使用转换

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设置为成长并缩小因为它似乎合适并设置了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>