在網頁設計中，讓鼠標懸停在不同元素上時發生顏色變化是一個常見的需求。這可以通過CSS來實現。

使用CSS實現鼠標懸停時的顏色變化有幾種方式。第一種是使用:hover偽類。

a:hover {
color: red;
}

以上代碼表示，當鼠標懸停在<a>標簽上時，字體顏色將變成紅色。

除了文字顏色，也可以通過:hover偽類來改變背景顏色。

button:hover {
background: blue;
}

以上代碼表示，當鼠標懸停在<button>標簽上時，背景顏色將變成藍色。

第二種方式是使用JavaScript。這種方式需要給元素添加一個onmouseover事件，鼠標懸停時觸發事件，改變元素的樣式。

function changeColor() {
document.getElementById("div1").style.backgroundColor = "green";
}

以上代碼表示，當鼠標懸停在id為div1的元素上時，它的背景顏色將變成綠色。

不同的元素可以使用不同的顏色，讓頁面更具吸引力。

CSS的:hover偽類可以簡單快速地實現顏色變化效果，而JavaScript可以更加靈活地實現更多的效果。在實際應用中可以根據需求選擇使用其中的一種或者兩種方式來實現。