css 简单的悬停淡入淡出

Question

如果有人能告诉我哪里出错了，我只是在徘徊，试图让一个图像褪色以在悬停时露出它下面的另一张图像。但是，我似乎无法让这两个图像重叠。任何帮助将不胜感激！

HTML

<div id="content" class="sixteen columns textcenter box">
<p>
       <img class="top" src="img/homepageimg2.jpg" alt="Photography Thumbnail" align="center"> 
       <img class="bottom" src="img/homepageimg22.jpg" alt="Photography Thumbnail" align="center">
</p>
</div>

CSS

#content {
z-index:10;
position:relative;
background-image:url(../img/backgroundindex.jpg);
background-repeat: repeat;  
padding-top: 50px;
padding-bottom:50px;

}
#content img{
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

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

谢谢！

Answer 1

Hover 是一种伪类，因此如果您希望在带有“top”类的 img（#content 的子项）悬停时应用该效果，您需要使用以下形式：

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

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

我已经在 CodePen 上设置了这个效果的完整演示：http://cdpn.io/aAjBb

演示 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>

演示 CSS：

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