隨著WEB技術的不斷發展，動態效果越來越常見。其中，鼠標經過背景變色是一種非常簡單而又實用的特效。本文將向大家介紹如何使用JavaScript實現鼠標經過元素時改變背景顏色的效果。

首先，我們需要使用JavaScript獲取要進行背景顏色改變的元素。可以通過各種選擇器來獲取元素，例如通過id獲取：

var element = document.getElementById("example");

獲取元素后，我們需要為元素添加鼠標經過事件當鼠標經過元素時，改變元素的背景顏色。可以使用JavaScript的addEventListener()方法來添加事件監聽器：

element.addEventListener("mouseover", function() {
element.style.backgroundColor = "red";
});

上述代碼中，我們為元素添加了一個mouseover事件監聽器，并在監聽器中將元素的背景顏色設置為紅色。當鼠標經過元素時，背景顏色將自動變為紅色。

當然，我們也可以給元素添加鼠標離開事件，當鼠標離開元素時，將元素的背景顏色還原為原來的顏色?？梢允褂萌缦麓a實現：

element.addEventListener("mouseout", function() {
element.style.backgroundColor = "";
});

上述代碼中，我們為元素添加了一個mouseout事件監聽器，并在監聽器中將元素的背景顏色設為空。當鼠標離開元素時，背景顏色將還原為原來的顏色。

除了改變元素的背景顏色，我們還可以使用CSS中的transition屬性來實現顏色漸變效果?？梢允褂萌缦麓a設置transition屬性：

element.style.transition = "background-color 0.5s ease-in-out";

上述代碼中，我們為元素設置了背景顏色漸變效果，持續時間為0.5秒，并使用了ease-in-out緩動函數。當鼠標經過元素時，背景顏色將逐漸變為紅色，離開元素時，背景顏色將逐漸變為原來的顏色。

綜上所述，使用JavaScript實現鼠標經過背景顏色變化是一種簡單、實用的WEB特效。通過上述代碼實現，我們可以輕松地添加這種特效到我們的WEB頁面中，為用戶帶來更好的使用體驗。