CSS3 原生支持通過(guò)鼠標(biāo)經(jīng)過(guò)圖片時(shí)使其變暗，可以為頁(yè)面添加更多的視覺(jué)效果和互動(dòng)性。在 CSS3 中，可以使用偽類選擇器:hover來(lái)實(shí)現(xiàn)鼠標(biāo)懸停效果。

img:hover {
filter: brightness(80%);
}

上面代碼中，brightness函數(shù)用于調(diào)整圖片的亮度，取值范圍為 0-100%，80% 代表將亮度調(diào)整為原來(lái)的 80%。

如果需要在鼠標(biāo)經(jīng)過(guò)時(shí)向左側(cè)平移圖片，可以使用translateX()函數(shù)：

img:hover {
transform: translateX(-10%);
}

上面代碼中，translateX()函數(shù)用于沿 X 軸平移元素，取值范圍為任意長(zhǎng)度單位。

如果需要同時(shí)調(diào)整亮度和平移圖片，可以使用多個(gè)屬性：

img:hover {
filter: brightness(80%);
transform: translateX(-10%);
}

上面代碼中，filter屬性用于調(diào)整圖片的亮度，transform屬性用于沿 X 軸平移元素。

在實(shí)際開(kāi)發(fā)中，可以利用鼠標(biāo)懸停事件為用戶提供更加豐富的體驗(yàn)，例如在圖片標(biāo)題下方顯示圖片相關(guān)信息，或?yàn)閳D片添加動(dòng)畫(huà)效果。