為什麼 JavaScript 滑鼠懸停不總是觸發 CSS :hover？

模擬滑鼠懸停並觸發CSS ":hover" 聲明

問題介紹

一些開發人員在嘗試純模擬滑鼠懸停功能時遇到了問題儘管觸發了滑鼠懸停偵聽器，JavaScript 也不會觸發CSS 懸停聲明。本文旨在解決這項挑戰並探索潛在的解決方案。

事件信任等級的說明

問題的核心在於瀏覽器中事件信任等級的概念。由使用者互動或 DOM 更改觸發的事件被視為可信事件並具有某些特權。相反，JavaScript 程式碼透過 DocumentEvent.createEvent 或 EventTarget.dispatchEvent 方法產生的事件被視為不受信任的事件。

對不受信任事件的限制

不受信任事件缺乏觸發「懸停」樣式是由於安全限制。瀏覽器限制由不受信任的事件觸發的預設操作，但按一下或 DOMActivate 等操作除外。這是一種故意的措施，旨在防止惡意程式碼模擬用戶互動並可能危及安全。

解決方案：手動新增 CSS 類別

要模擬滑鼠懸停效果，解決方案在於手動新增和刪除 CSS偵測到 mouseover 和 mouseout 事件時的類別。這種方法有效地觸發CSS「：hover」聲明，而不依賴不受信任的事件。以下是一個範例實作：

// Simulate mouseover effect
element.addEventListener("mouseover", () => {
  element.classList.add("hover");
});

// Simulate mouseout effect
element.addEventListener("mouseout", () => {
  element.classList.remove("hover");
});

透過實作此解決方案，您可以模擬滑鼠懸停事件並觸發所需的 CSS 懸停樣式，而不會違反瀏覽器安全限制。

以上是為什麼 JavaScript 滑鼠懸停不總是觸發 CSS :hover？的詳細內容。更多資訊請關注PHP中文網其他相關文章！