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/high-performance-animations/

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

是的，你走在正确的轨道上。我建议不要使用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>

Answer 4

要实现此目的，您可以单独使用CSS。如果你将子div包装在另一个div中，当容器margin-top悬停时，它会div动画，就像这样：

.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

这是一个有效的方法 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相对定位，当容器处于悬停状态时移动到顶部。

悬停时：在兄弟姐妹之上移动div

5 个答案: