悬停时一张图像到另一张图像（不透明）

Question

我需要在悬停到另一个时进行一次图像更改。 我使用这段代码：

<div id="cf">
  <img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
  <img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>


#cf {
  position:relative;
  height:200px;
  width:118px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -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;
}

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

我有问题，我可以看到悬停图像（底部），因为顶部图像是透明的。我需要悬停图像（底部）仅在我悬停时才会看到

代码来源：http://css3.bradshawenterprises.com/cfimg/

Answer 1

在父级（#cf：hover）上使用悬停选择器而不在图像上使用。

＆＃13;

＆＃13;

#cf {
  position:relative;
  height:200px;
  width:118px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -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;
}

#cf img.top{
  width: 200px;
}

#cf img.bottom{
  opacity: 0;
}

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

#cf:hover img.bottom {
  opacity:1;
}

＆＃13;

<div id="cf">
  <img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
  <img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将:hover状态移动到#cf，如下所示：

#cf {
  position:relative;
  height:200px;
  width:118px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -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;
}

#cf img.bottom {
  opacity: 0;
}

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

#cf:hover img.bottom{
  opacity: 1;
}

<div id="cf">
  <img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
  <img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>