今天我們來學習如何使用CSS實現圖片點擊變彩色的效果。首先，我們需要先準備一張彩色的圖片作為示例。接著，我們就可以開始編寫CSS代碼了。

img:hover {
filter: grayscale(0%);
}

在代碼中，我們使用了:hover偽類來捕捉鼠標懸停在圖片上的動作。接下來，我們使用了 filter屬性，將圖片的灰度值從0%調整為100%。這表示我們將取走圖片的所有色彩，使它變成黑白的效果。

接下來，我們要使用另外一個Hover的效果，來實現圖片顏色恢復的效果。

img:hover {
filter: grayscale(0%);
}
img:active {
filter: none;
}

在代碼中，我們除了使用:hover偽類之外，還使用了CSS中的:active偽類。這表示當用戶點擊圖片時，圖片將回到原本的顏色狀態。接下來，我們使用了filter:none來表示去除所有的濾鏡。

最后，我們需要將這段CSS代碼與HTML文件合并在一起，來看看效果。

這樣，我們就可以在瀏覽器中看到我們的彩色圖片了，當我們鼠標懸停在圖片上時，圖片會變為黑白的效果。而當我們點擊圖片時，圖片會恢復原本的彩色。

這就是使用CSS實現圖片點擊變彩色的方法。通過這種方法，我們可以為網頁設計出更為有趣的效果。