css简单悬停淡入淡出

我只是在想，是否有人能告诉我哪里出了问题，试图让一张图片在悬停时褪色，露出下面的另一张图片。然而，我似乎无法使这两幅图像重叠。任何帮助都将不胜感激

HTML

---

谢谢

Hover是一个psuedo，因此如果希望在类为“top”的img（内容的子项）悬停时应用效果，则需要使用以下表单：

#content img.top:hover {
  opacity: 0;
}

尝试在.top和.bottom（加上top:0、bottom:0等）上使用绝对定位，并在其父容器上使用相对定位。确保.top的z索引高于.bottom

我已经在CodePen上设置了此效果的完整演示：

演示HTML：

<div class="hover-swap">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" class="top"/>
  <img src="http://myhswm.org/images/sized/images/animals/tuxedo_kittens-256x256.jpg" class="bottom"/>
</div>

---

谢谢你！这真的很有帮助。没问题！如果这个答案是正确的，那么它就是一个很好的答案。欢迎来到StackOverflow！

#content img.top:hover {
  opacity: 0;
}

<div class="hover-swap">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" class="top"/>
  <img src="http://myhswm.org/images/sized/images/animals/tuxedo_kittens-256x256.jpg" class="bottom"/>
</div>

.hover-swap {
  position: relative;
  height: 256px;
  width: 256px;
}

.hover-swap .top {
  opacity: 1;
  z-index: 2;
}

.hover-swap .bottom {
  opacity: 1;
  z-index: 1;
}

.hover-swap:hover .top {
  opacity: 0;
}

.hover-swap .bottom, .hover-swap .top {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}