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

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

您可以移动: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>

Answer 2

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

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

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