html - 使用 CSS 使图像消失并在悬停后出现另一个图像

Question

当鼠标悬停在#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>

Answer 1

试试这个:

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

当然，如果您的实际站点上的 maps1 中还有任何其他内容，则效果不佳。