悬停：移动DIV起来，在同级

之上，我有以下设置：悬停：移动DIV起来，在同级

<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。没有了，我想恢复整个事情。

我该如何做这样的事情，我在正确的轨道上？

来源

2017-04-19 George Welder

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

您可以对此使用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/

来源

2017-04-19 13:26:51

谢谢！这已经非常有帮助！但是，我不想同时移动两个div，而是移动较低的div，然后重叠并隐藏较高的div，即，严格来说，我不想移动第一个div，只是隐藏它在另一个之下。 –

没问题，我已经更新了答案 –

完美！谢谢！ –

它很难，当你溢出容器到达漂亮的动画，下面的代码只是交换他们在悬停：

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>

来源

2017-04-19 13:21:29 Leguest

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

来源

2017-04-19 13:23:20

要做到这一点，你可以单独使用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>

来源

2017-04-19 13:23:58

这里的工作 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相对positio在容器处于悬停状态时移动到顶部。

来源

2017-04-19 13:28:43

悬停：移动DIV起来，在同级

回答

相关问题