一個圖像到另一個懸停（不透明）

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>