CSS是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的一部分。在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常需要用到圖片，而當(dāng)我們希望當(dāng)鼠標(biāo)移入圖片時(shí)改變圖片的顏色，該怎么做呢？

/* 首先需要選中要操作的圖片元素 */
img {
/* 設(shè)置初始顏色 */
filter: grayscale(100%);
transition: all 0.2s ease; /* 添加過(guò)渡動(dòng)畫(huà)效果，讓變化更加自然 */
}
/* 移入狀態(tài)下的樣式改變 */
img:hover {
filter: grayscale(0%);
}

從代碼中可以看出，我們通過(guò)CSS選擇器選中了圖片元素，并在其初始狀態(tài)下設(shè)置了灰度濾鏡，使圖片變成灰色。同時(shí)，我們?yōu)樵撛靥砑恿艘粋€(gè)過(guò)渡動(dòng)畫(huà)效果，讓圖片顏色的變化更加自然。接著，我們使用:hover偽類選擇器，當(dāng)鼠標(biāo)移入時(shí)，將灰度濾鏡的值設(shè)置為0%,達(dá)到圖片顏色變化的效果。

通過(guò)這種方法，我們可以輕松地實(shí)現(xiàn)圖片鼠標(biāo)移入變色的效果，讓網(wǎng)頁(yè)更加生動(dòng)有趣。