CSS的魔力不僅可以創建精美的樣式，還可以幫助您實現酷炫的互動效果。其中一種很有趣的效果是讓用戶的鼠標在頁面上橫移時，頁面的背景色也跟著變化。下面我們就來學習如何使用CSS實現這種效果。

html {
height: 100%;
}
body {
height: 100%;
background: linear-gradient(to right, #1abc9c, #3498db);
transition: background 0.5s ease-in-out;
}
body:hover {
background: linear-gradient(to right, #9b59b6, #e74c3c);
}

代碼解析：

首先，讓頁面和body元素都占據整個屏幕的高度，這是因為我們希望背景色的漸變能夠覆蓋整個屏幕。

然后，我們設置了一個初始的背景顏色漸變。這里使用了CSS的linear-gradient函數來創建漸變效果，to right表示從左向右，#1abc9c到#3498db是色彩的過渡。注意transition屬性，這個屬性指定屬性值的變化應該怎樣過渡。這里的過渡效果是0.5秒，并使用了"ease-in-out"方式來平滑地過渡。

最后，我們使用:hover來指定當鼠標移到body元素上時，要應用的CSS，即新的背景色漸變和過渡效果。這里使用了不同的兩個顏色作為色彩過渡。

至此，我們已經成功地使用CSS創建了一個迷人的鼠標橫移效果。