Html 悬停时，一个图像切换到另一个图像（无透明）

我需要在悬停时将一个图像更改为另一个图像。 我使用以下代码：

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

#碳纤维{
位置：相对位置；
高度：200px；
宽度：118px；
保证金：0自动；
}
#cf img{
位置：绝对位置；
左：0；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
#cf img.top：悬停{
不透明度：0；
}

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

---

代码源：

您可以将

：hover

状态移动到#cf，如下所示：

#cf{
位置：相对位置；
高度：200px；
宽度：118px；
保证金：0自动；
}
#cf img{
位置：绝对位置；
左：0；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
#cf img.bottom{
不透明度：0；
}
#cf：悬停img.top{
不透明度：0；
}
#cf：悬停式img.bottom{
不透明度：1；
}

---

在父对象上使用悬停选择器（#cf:hover），而不是在图像上

#cf{
位置：相对位置；
高度：200px；
宽度：118px；
保证金：0自动；
}
#cf img{
位置：绝对位置；
左：0；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
#cf img.top{
宽度：200px；
}
#cf img.bottom{
不透明度：0；
}
#cf：悬停img.top{
不透明度：0；
}
#cf：悬停式img.bottom{
不透明度：1；
}