->两个div重叠
->每个div都有一些文本。
->一个可见，另一个不可见。
->在两个div上的鼠标上向左滑动。
->可见的淡出。
->看不见的人渐渐消失了。
我知道如何单独处理所有这些效果，但是无法将它们组合在一起。
我在这里有一些代码已经花了半天时间。任何帮助将不胜感激。
https://jsfiddle.net/pjdz0u7q/
.main {
position: relative;
}
.a,
.b {
top: 0;
left: 0;
}
.a {
transition: .5s;
}
.a:hover {
transform: translatex(50px);
animation: fadeOut ease 10s;
}
.b:hover {
transform: translatex(50px);
animation: fadeOut ease 10s;
}
<div class="main">
<div class="a">
Something
</div>
<div class="b">
Anything
</div>
</div>
如果我正确地理解了您的任务，请尝试以下操作：
.main {
position: relative;
display: inline-block;
}
.a,
.b {
top: 0;
left: 0;
transition: .5s;
}
.a {
opacity: 1;
}
.b {
opacity: 0;
position: absolute;
}
.main:hover .a {
transform: translatex(50px);
opacity: 0;
}
.main:hover .b {
transform: translatex(50px);
opacity: 1;
}<div class="main">
<div class="a">
Something
</div>
<div class="b">
Anything
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句