html - 使用CSS悬停后，使图像消失并在其位置显示另一个图像

当鼠标悬停在＃pic3上时，我希望＃pic3消失并且＃pic4出现在其位置。

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>

最佳答案

尝试这个：

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

当然，如果您的实际站点上的maps1中还有其他内容，则此方法将无法正常运行。