CSS是網頁設計中不可或缺的一部分，它可以實現各種各樣的效果，其中一個常見的效果就是鼠標放在上變色。比如，在鏈接上放置鼠標時，鏈接的顏色就會發生改變。這是怎么實現的呢？

a:hover {
color: red;
}

上面的代碼就是實現了在鼠標放在鏈接上時，鏈接的顏色變為紅色。其中，:hover是一個偽類選擇器，它表示當鼠標放在元素上時，應用的樣式。

除了鏈接，我們還可以用鼠標放在其他元素上時改變它們的樣式，比如圖片、按鈕、菜單等。這樣可以為網頁增添一些交互性和動態感，提升用戶體驗。

img:hover {
opacity: 0.8;
}
button:hover {
background-color: green;
}
nav li:hover {
border-bottom: 2px solid blue;
}

上面的代碼分別是鼠標放在圖片上，圖片的透明度變為0.8；鼠標放在按鈕上，按鈕的背景色變為綠色；鼠標放在菜單欄中的某個選項上，該選項底部會出現一條藍色的邊框。

總之，鼠標放在上變色是一種常見的網頁設計效果，通過CSS的偽類選擇器:hover，我們可以輕松實現它。