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