JavaScript 中的滑鼠懸停事件

當指標裝置將游標移向網頁中的元素時，會發生滑鼠懸停事件。

在本教程中，我們將使用 JavaScript 實現滑鼠懸停事件。

為此，我們可以使用 addEventListener() 在所需元素上新增所需的滑鼠懸停事件。

參考下面的示例。

• HTML

<ul id="example">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

• JavaScript

let test = document.getElementById("example");

test.addEventListener("mouseover", function (event) {
  //highlight the mouseover target
  event.target.style.color = "red";
}, false);

test.addEventListener("mouseout", function (event) {
  // highlight the mouseout target
  event.target.style.color = "black";
}, false);

在上面的程式碼中，我們使用 getElementById() 函式檢索我們希望將游標移動到的所需元素。然後我們繼續將 addEventListener() 方法應用於此元素，該方法將給定的事件處理程式附加到此元素。

當提供的事件傳送到目標時，EventTarget 方法 addEventListener() 建立一個將被呼叫的函式。這裡分別呼叫了 mouseover 和 mouseout 方法。

mouseover 事件將游標移動到給定的元素。mouseout 事件將游標從該元素上移開。

event.target.style.color 屬性指定呼叫特定目標方法（例如 mouseover 或 mouseout）時的顏色。