在CSS中，我們可以通過改變鼠標懸停時的背景顏色來增強用戶體驗，以下是一些實現(xiàn)這一功能的方法。

方法一：使用:hover偽類

我們可以使用CSS的:hover偽類來改變鼠標懸停時的背景顏色，假設(shè)我們有一個div元素，我們可以這樣寫：

div:hover {
    background-color: #f00; /* 紅色背景 */
}

方法二：使用JavaScript和CSS

我們可以結(jié)合JavaScript和CSS來實現(xiàn)更復(fù)雜的鼠標懸停效果，我們可以創(chuàng)建一個新的CSS類，然后在JavaScript中動態(tài)添加這個類：

// 假設(shè)我們有一個div元素，id為'my-div'
var myDiv = document.getElementById('my-div');
// 創(chuàng)建一個新的CSS類，改變背景顏色
var newStyle = document.createElement('style');
newStyle.type = 'text/css';
newStyle.innerHTML = `
    .my-div-hover {
        background-color: #f00; /* 紅色背景 */
    }
`;
document.head.appendChild(newStyle);
// 當鼠標懸停時添加這個類
myDiv.onmouseover = function() {
    this.classList.add('my-div-hover');
};
// 當鼠標離開時移除這個類
myDiv.onmouseout = function() {
    this.classList.remove('my-div-hover');
};

方法三：使用CSS動畫和過渡

我們還可以使用CSS的動畫和過渡功能來創(chuàng)建更平滑的鼠標懸停效果。

div:hover {
    animation: my-div-hover 1s; /* 定義一個動畫 */
}
@keyframes my-div-hover {
    0% { background-color: #f00; } /* 紅色背景 */
    100% { background-color: #0f0; } /* 綠色背景 */
}

在這個例子中，當鼠標懸停時，背景顏色會在1秒內(nèi)從紅色過渡到綠色。