懸停時：在兄弟姐妹之上移動div

Question

我有以下設置：

<div class="" style="height: 400px !important;
                     width: 100% !important;
                     overflow: hidden;">
  <div class="" style="height: 400px !important;
                       width: 100% !important;
                       background-color: red;">
  </div>
  <div class="" style="height: 400px !important;
                       width: 100% !important;
                       background-color: blue;">
  </div>
</div>

所以有一個div，它有一定的高度。 它內部有兩個具有相同高度的div，這意味着它們的高度是它們的容器div的兩倍。 溢出被隱藏，因此只顯示第一個div。

我現在想要等待用戶懸停，然后動畫並移動第二個div，以便第二個div現在隱藏第一個div。 在取消懸停時，我想要恢復整個事情。

我怎么做這樣的事情，我是在正確的軌道上嗎？

Answer 1

您可以使用CSS轉換。 當懸停容器div時，變換將應用於內部div。

轉換規則用於顯示懸停開始和停止時的位置變化。

 .container { height: 400px; overflow: hidden; } .container:hover .inner-2 { transform: translateY(-100%); } .inner { height: 100%; transition: transform .6s ease-in-out; } .inner-1 { background-color: rgba(255,0,0,.5); } .inner-2 { background-color: rgba(0,0,255,.5); } 

 <div class="container"> <div class="inner inner-1"></div> <div class="inner inner-2"></div> </div> 

的jsfiddle

值得注意的是，這種方法的處理器密集程度遠低於建議絕對定位元素或改變其邊界的答案，並且還會導致更平滑的過渡。

來源： https ： //www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/和https://www.html5rocks.com/en/tutorials/speed /高性能的動畫/

Answer 2

當你溢出容器時很難達到漂亮的動畫，下面的代碼只是在懸停時交換它們：

CSS

默認狀態

   div>div:first-child {
      display: block;
   }

   div>div:last-child {
      display: none;
   }

懸停狀態

   div:hover>div:first-child {
      display: none;
   }

   div:hover>div:last-child {
      display: block;
   }

替代高度上升

 div { position: relative; } div>div:first-child { position: absolute; left: 0; top: 0; } div>div:last-child { left: 0; bottom: 0; position: absolute; height: 0 !important; z-index: 1; transition: height .5s linear; } div:hover>div:last-child { height: 400px !important; } 

 <div class="" style="height:400px !important; width:100% !important; overflow:hidden;"> <div class="" style="height:400px; width:100% !important; background-color: red;"> </div> <div class="" style="height:400px; width:100% !important; background-color: blue;"> </div> </div> 

Answer 3

是的，你走在正確的軌道上。 我建議不要使用內聯樣式 ，而是使用類和CSS標記 。

您可以使用例如抵消的保證金。 這可以使用CSS過渡動畫。
我在下面顯示。

 .parent { height: 100px; overflow: hidden; } .parent:hover .child:first-child { margin-top: -100px; } .child { height: 100px; transition: margin-top 1s; } .red { background-color: red; } .blue { background-color: blue; } 

 <div class="parent"> <div class="child red"> </div> <div class="child blue"> </div> </div> 

Answer 4

要實現這一點，您可以單獨使用CSS。 如果你將子div包裝在另一個div ，當div容器div懸停時它的margin-top動畫，就像這樣：

 .container { height: 400px; width: 100%; overflow: hidden; position: relative; } .child { height: 400px; width: 100%; } .slide { margin-top: 0; transition: margin 0.3s; } .container:hover .slide { margin-top: -400px; } .child.red { background-color: red; } .child.blue { background-color: blue; } 

 <div class="container"> <div class="slide"> <div class="child red"></div> <div class="child blue"></div> </div> </div> 

或者，您可以縮小第一個div的height ，但這可能會導致溢出問題，具體取決於該元素的內容：

 .container { height: 400px; width: 100%; overflow: hidden; position: relative; } .child { height: 400px; width: 100%; transition: height 0.3s; } .container:hover :first-child { height: 0; } .child.red { background-color: red; } .child.blue { background-color: blue; } 

 <div class="container"> <div class="child red"></div> <div class="child blue"></div> </div> 

Answer 5

這是一個工作小提琴

HTML

<div class="container" style="height:400px !important; width:100% !important; overflow:hidden;">
  <div class="top" style="height:400px !important; width:100% !important; background-color: red;">
  </div>

  <div class="bottom" style="height:400px !important; width:100% !important; background-color: blue;">
  </div>
</div>

CSS

.container:hover .bottom{
  top: -400px;
}

.bottom{
  position: relative;
  top: 0px;
  transition-property: top;
  transition-duration: 1s;
}

容器內的底部div相對定位，並且當容器具有懸停狀態時移動到頂部。