在網頁制作中，點擊圖片更換的效果是很常見的，如果您想要在自己的網頁中加入這樣的效果，可以通過 CSS 中的 :hover 選擇器實現。下面我們將為您介紹實現這一效果的具體步驟。 >HTML 代碼如下：

<div class="image">
<img src="image1.jpg" alt="image1">
</div>

首先需要創建一個包含圖片的 div 元素，并在其中添加一張圖片。接下來，您需要添加 CSS 樣式來實現點擊圖片更換的效果。 >CSS 代碼如下：

.image {
position: relative;
}
.image:hover img:first-child {
display: none;
}
.image:hover img:last-child {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}

解釋： 1. .image 被設置為 position: relative; ，以便在子元素 img 的絕對定位時，基準點是相對于它的父元素 .image。 2. 定義了 :hover 偽類選擇器，當鼠標移動到圖片上方時，執行樣式規則。 3. img:first-child 被設置為 display: none; ，也就是隱藏第一張圖片，這樣第二張圖片才能替換第一張圖片。 4. img:last-child 被設置為 display: block; position: absolute; top: 0; left: 0; z-index: 99; ，也就是顯示第二張圖片，并設置其為絕對定位，使其覆蓋在第一張圖片之上。 完成上述步驟后，您將會發現當鼠標移動到圖片上方時，圖片會更換為第二張圖片。實現了點擊圖片更換的效果。