使用CSS懸停後，圖像消失並出現其他圖像

Question

我希望＃pic3消失，＃pic4在鼠標懸停在＃pic3上時出現在它的位置。

的CSS：

#pic3{ 
max-width: 800px; 
max-height: 500px; 
} 

#pic4{ 
max-width:800px; 
max-height: 500px; 
display:none; 
} 

#pic4:hover{ 
max-width:800px; 
max-height: 500px; 
opacity:1; 
} 

在HTML

<div class="maps1"> 
    <img id="pic3" src="chicago.png"> 
    <img id="pic4" src="chicago2.png"> 
</div> 

Answer 1

試試這個：

.maps1 #pic3 {display:inline-block;} 
.maps1 #pic4 {display:none;} 
.maps1:hover #pic3 {display: none;} 
.maps1:hover #pic4 {display: inline-block;} 

當然，如果有什麼事，在maps1否則您的實際網站，此次榮獲」工作得很好。

Answer 2

如果您希望他們覆蓋和有你可以使用類似下面的

#pic3 { 
    /* Arbitrary but needs to be the same as pic4 if the image dimensions 
     are different */ 
    width:500px; height:800px; 

    max-width: 800px; 
    max-height: 500px;   
    position:absolute; 
} 
#pic4 { 
    /* Arbitrary but needs to be the same as pic3 if the image dimensions 
     are different */ 
    width:500px; height:800px; 

    position:absolute; 
    max-width:800px; 
    max-height: 500px; 
    opacity:0; 
    -webkit-transition: opacity 1s; 
    transition: opacity 1s; 
} 
#pic3:hover ~ #pic4, #pic4:hover { 
    opacity:1; 
} 

Demo