在網頁設計中，經常需要使用 CSS 來為元素添加效果，其中鼠標懸停變換背景顏色是經常使用的一種效果。下面我們來看看如何使用 CSS 實現這種鼠標劃過變背景色的效果。

首先我們需要給需要變色的元素添加一個 CSS 類名，比如給一個按鈕添加類名“btn”，代碼如下：

.btn {
background-color: #ccc;
}

然后我們可以使用偽類選擇器:hover來設定鼠標懸停時的樣式，代碼如下：

.btn:hover {
background-color: #f00;
}

這樣，當鼠標懸停在這個按鈕上時，它的背景顏色就會從初始的灰色（#ccc）變成了紅色（#f00）。

另外，在實際設計中，我們還可以結合 CSS 過渡效果來使顏色變化更加平滑，代碼如下：

.btn {
background-color: #ccc;
transition: background-color .3s ease;
}
.btn:hover {
background-color: #f00;
}

這里的transition屬性指定了背景顏色的變化需要 0.3 秒，采用了緩動函數（ease）來使變化更加平滑自然。

總的來說，通過給元素添加 CSS 類名和使用偽類選擇器，我們可以很容易地實現鼠標懸停變換背景色的效果。而通過使用 CSS 過渡效果，可以讓這種效果更加平滑、更加舒適。