CSS鼠標變另一張圖片 CSS可以用來控制網頁的外觀和交互效果，其中一個常用的功能是讓鼠標懸停在某個元素上時，顯示不同的圖片或樣式。這種效果可以通過CSS中的:hover偽類和background屬性來實現。 首先需要準備兩張圖片，一張是默認狀態下的圖片，另一張是當鼠標懸停在元素上時要顯示的圖片。然后可以在CSS文件中使用background屬性來為元素設置默認狀態下的背景圖片：

p {
background-image: url(default-img.jpg);
/*其他樣式*/
}

接著，可以使用:hover偽類來為元素設置鼠標懸停時的樣式，并將背景圖片替換成需要顯示的圖片：

p:hover {
background-image: url(hover-img.jpg);
}

這樣，當鼠標懸停在p元素上時，它的背景圖片會從默認的圖片切換到另一張圖片。 除了使用背景圖片來實現鼠標懸停效果，還可以使用CSS中的content屬性來插入圖片。例如，可以在元素中插入一個空的::before偽元素，并為其設置默認狀態下的圖片：

p::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url(default-img.jpg);
/*其他樣式*/
}

然后可以使用:hover偽類為該元素的::before偽元素設置鼠標懸停時要顯示的圖片：

p:hover::before {
background-image: url(hover-img.jpg);
}

這樣，在鼠標懸停時，元素中的::before偽元素會從默認的圖片切換到另一張圖片。 總之，CSS提供了多種方法來實現鼠標懸停效果，并且使用它們可以讓網頁更具交互性和視覺吸引力。