CSS鼠標以上變淡效果圖是一個很常見的網站特效。當鼠標懸停在某個元素上時，該元素就會出現變淡的效果。通常，此效果用于按鈕，鏈接和菜單項等。

實現該效果的方法非常簡單。我們只需要使用CSS選擇器和一些簡單的屬性就可以實現它。以下是實現該效果的CSS代碼：

a:hover {
opacity: 0.5;
}

在上述代碼中，我們使用偽類選擇器“:hover”來針對鼠標懸停狀態的元素，然后使用“opacity”屬性來控制該元素的不透明度。在此示例中，當鼠標懸停在鏈接上時，鏈接的不透明度為0.5。

然而，我們也可以通過設置其他屬性來實現類似的效果。例如，我們可以改變元素的背景顏色或文字顏色。以下是更改元素背景顏色的CSS代碼：

a:hover {
background-color: #E0E0E0;
}

在上面的代碼中，我們使用“background-color”屬性來改變鏈接的背景顏色。當鼠標懸停在鏈接上時，鏈接的背景顏色會變為灰色。

總之，CSS鼠標以上變淡效果圖是一種簡單但實用的特效，可以使網站更加交互和吸引人。如果您正在開發一個網站，不妨考慮將此效果應用于您的按鈕，鏈接或菜單項。