Question

当我将鼠标悬停在其中较小的盒子上时，我试图填充一个包装器（600x600px）。对于左上角的一个方框，可以使用常规的过渡时间功能轻松完成，但是当试图向其他方向放大时，我已经卡住了。

所以我有以下内容：

#allbox {
  background: #bbb;
  width: 600px;
  height: 600px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0
}

带框：

div.box1 {
  position: absolute;
  top: 0%;
  left: 0%;
}

div.box2 {
  position: absolute;
  top: 0%;
  left: 37.5%;
}

对于过渡，我使用：

#div1 {-webkit-transition-timing-function: linear;}
#div1 {transition-timing-function: linear;}
div.box1:hover {
  width: 600px;
  height: 600px;
}

但我无法为下面的方框找到一个好办法。

Answer 1

我想我们只是将“ left：0; ”添加到悬停状态。

div.box2:hover {
  left: 0;
  width: 600px;
  height: 600px;
}

希望这对你有所帮助。

Answer 2

以下是使用z-index保持悬停在顶部的示例。

#allbox {
  background: #bbb;
  width: 600px;
  height: 300px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0
}
#allbox div {
  position: absolute;
  z-index: 1;
  top: 0%;
  width: 33.33%;
  height: 50%;
  transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 1s linear;
}
div.box1 {
  left: 0;
  background: blue;
}
div.box2 {
  left: 33.33%;
  background: red;
}
div.box3 {
  left: 66.66%;
  background: green;
}
#allbox div:hover {
  z-index: 2;
  left: 0;
  width: 100%;
  height: 100%;
  transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 0s linear;
}

<div id="allbox">
  <div class="box1">  
  </div>
  <div class="box2">  
  </div>
  <div class="box3">  
  </div>
</div>

CSS向不同方向过渡

2 个答案: