悬停时：将 div 向上移动，在兄弟节点之上答案

【问题标题】：On hover: Move div up, on top of sibling悬停时：将 div 向上移动，在兄弟节点之上
【发布时间】：2017-04-20 21:28:52
【问题描述】：

我有以下设置：

<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。在取消悬停时，我想恢复整个事情。

我该怎么做这样的事情，我在正确的轨道上吗？

【问题讨论】：

嗨乔治，你已经尝试过的代码是什么？

标签： javascript jquery html css

【解决方案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/high-performance-animations/

【讨论】：

谢谢！这已经非常有帮助了！但是，我不想同时向上移动两个 div，而是将下部 div 向上移动，然后重叠并隐藏上部 div，即严格来说我不想将第一个 div 向上移动，只是将其隐藏在另一个下面。

【解决方案2】：

是的，你在正确的轨道上。我建议不要使用inline styles，而是使用classes 和CSS markup。

例如，您可以使用边距进行抵消。这可以使用CSS transitions 进行动画处理。
我在下面展示这个。

.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>

【讨论】：

【解决方案3】：

要实现这一点，您可以单独使用 CSS。如果您将子 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>

【讨论】：

【解决方案4】：

溢出容器时很难获得漂亮的动画，下面的代码只是在悬停时交换它们：

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>

【讨论】：

【解决方案5】：

这是一个工作 Fiddle

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相对定位，当容器处于hover状态时移动到顶部。

【讨论】：