CSS的鼠標交互效果是web頁面設計中必不可少的一部分，許多人都希望在鼠標移至某元素時改變該元素的顏色。下面是一些簡單的CSS代碼示例，以實現這個效果。

.hover {
background-color: red;
}
.hover:hover {
background-color: blue;
}

以上代碼是設置元素在鼠標移至該元素上時，該元素的背景顏色將變為藍色。可以看出，我們在命名該元素的class名稱時采用了".hover"的方式，表示該元素是該交互的目標。當鼠標移動到該元素上方時，我們通過":"來表示該元素所觸發的CSS偽類，后接"hover"，這樣該元素就能夠在鼠標懸停時更換顏色。

.hover {
color: black;
background-color: white;
border: 1px solid black;
padding: 5px;
}
.hover:hover {
color: white;
background-color: black;
}

上面的代碼展示了在鼠標移入元素時變更多個樣式屬性的方式。我們選取了一個普通的div元素作為示例，并為其設置了背景顏色、前景文本顏色、邊框、和內部填充。當鼠標移入該元素時，文字將變為白色，背景顏色變為黑色以實現反差效果。很容易看出，各樣式屬性的變更方式與前面例子中的屬性變更是完全一致的。