當(dāng)我們需要讓網(wǎng)頁的圖片在鼠標(biāo)移上時變色，我們可以使用CSS來達(dá)到這個效果。

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

上面的代碼表示當(dāng)鼠標(biāo)移至標(biāo)簽時，圖片會變成黑白。

如果我們想要讓圖片在鼠標(biāo)移上時變成另一種顏色，可以使用下面的代碼：

img:hover {
filter: hue-rotate(90deg);
}

上面的代碼表示當(dāng)鼠標(biāo)移至標(biāo)簽時，圖片會變成藍(lán)色。

如果我們想要讓圖片在鼠標(biāo)移上時變成兩種顏色的漸變色，可以使用下面的代碼：

img:hover {
background-image: linear-gradient(to right, #ffcccc 0%, #ffcccc 50%, #99ccff 50%, #99ccff 100%);
}

上面的代碼表示當(dāng)鼠標(biāo)移至標(biāo)簽時，圖片會變成紅色和藍(lán)色的漸變色。

讓圖片在鼠標(biāo)移上時變色是網(wǎng)頁設(shè)計的常見效果之一，使用CSS可以幫助我們快速實現(xiàn)這個效果。