CSS鼠標點擊更換圖片是Web開發中非常常見的技巧。該技巧可以讓網頁更加生動而有趣。下面我們就來學習如何使用CSS實現這一功能。

首先，我們需要在HTML中添加圖片。可以使用標簽實現：

<img id="img1" src="image1.jpg" onclick="changeImg()">

上述代碼中，我們使用了id屬性來標識圖片元素，并且定義了一個onclick事件來觸發更換圖片的JavaScript函數。下面我們需要編寫CSS來更改圖片：

#img1 {
cursor: pointer;
}
#img1:hover {
opacity: 0.7;
}

上述CSS代碼中，我們使用了鼠標懸浮效果的:hover偽類來為圖片添加了一個半透明的遮罩。鼠標移上去時，圖片會變暗一些。接下來，我們需要編寫更換圖片的JavaScript代碼：

function changeImg() {
var img = document.getElementById("img1");
if (img.src.match("image1.jpg")) {
img.src = "image2.jpg";
} else {
img.src = "image1.jpg";
}
}

上述代碼中，我們定義了一個JavaScript函數，該函數獲取當前圖片的元素，并根據當前圖片的src屬性判斷應該切換到哪一個圖片。這樣，當用戶點擊圖片時，就會觸發這個函數，從而實現圖片的更換。

最后，我們將HTML、CSS和JavaScript代碼整合起來，就可以實現CSS鼠標點擊更換圖片功能了。這是Web開發中非常實用的技巧，可以讓網頁更加生動而有趣。