我遇到了2个div将2个宽度50%宽度的容器分开的问题 当悬停在一个上时,它会延伸到60/40%。
问题是:当悬停在1(因此它被扩展)然后快速盘旋在另一个上时,z-index正在剪切。
看看这个小提琴的例子: https://jsfiddle.net/h9vs79as/
在逆转过渡结束后,我需要新的转变......
HTML
<div class="container">
<div class="one">div 1</div>
<div class="two">div 2</div>
</div>
CSS
.container { height: 200px; width: 500px; position: relative; }
.container div { position: absolute; height: 200px; width: 50%; z-index: 100; transition: all .5s ease; }
.one { left: 0; background-color: #00ff00; }
.two { right: 0; background-color: #ff00ff; }
.container div:hover { width: 60%; z-index: 150; transition: all .5s ease; }
答案 0 :(得分:1)
您可以使用flexbox执行此操作,无需定位或z-index:
.container {
height: 200px;
width: 500px;
position: relative;
display: flex;
}
.container div {
flex: 1 1 50%;
transition: all .5s ease;
}
.one {
background-color: #00ff00;
}
.two {
background-color: #ff00ff;
}
.container div:hover {
flex: 0 0 60%;
transition: all .5s ease;
}
&#13;
<div class="container">
<div class="one">div 1</div>
<div class="two">div 2</div>
</div>
&#13;