Question

->两个div重叠
->每个div都有一些文字。
->一个可见，另一个不可见。
->将鼠标移到两个div上向左滑动。
->可见的淡出。
->不可见的人渐渐消失。

我知道如何单独处理所有这些效果，但是无法将它们组合在一起。

我这里有一些代码，已经花了半天时间。任何帮助将不胜感激。


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

Answer 1

如果我正确理解了您的任务，请尝试以下操作：

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

CSS叠加，淡入淡出和过渡

1 个答案: