CSS3鼠標懸停圖片切換是一種非常基礎(chǔ)且常用的前端效果，通過在標簽上添加:hover偽類來實現(xiàn)。

首先，在HTML代碼中添加要顯示的圖片：

<div class="image">
<img src="img1.jpg" alt="" id="img1">
<img src="img2.jpg" alt="" id="img2">
</div>

其中image類用于包裹圖片，img1和img2分別代表兩張不同的圖片，我們需要設(shè)置其中一張默認顯示。

.image img {
display: none; /* 隱藏所有圖片 */
}
#img1 {
display: block; /*設(shè)置一張默認顯示的圖片 */
}

接下來就是關(guān)鍵的鼠標懸停效果的實現(xiàn)：

#img1:hover ~ #img2 {
display: block;
}
#img2:hover {
display: block;
}
#img2:hover ~ #img1 {
display: none;
}

當鼠標懸停在img1上，通過CSS選擇器：hover偽類和~兄弟元素選擇器，將img2設(shè)置為顯示，并將img1隱藏；當鼠標懸停在img2上，只需要將img1隱藏并將img2顯示即可。

以上就是CSS3鼠標懸停圖片切換的基本實現(xiàn)方法，可以根據(jù)需要進行細節(jié)調(diào)整，讓效果更加優(yōu)美。