JavaScript 可以在沒有滑鼠互動的情況下真正模擬 CSS :hover 效果嗎？

透過JavaScript 模擬CSS 懸停效果

問題：

是否可以使用純JavaScript 來模擬CSSS "hover " 效果，啟動關聯的CSS 規則而不實際觸發滑鼠懸停事件？

遇到的問題：

• 儘管添加了滑鼠懸停事件偵聽器，CSS 懸停聲明仍然處於非活動狀態。
• 嘗試手動新增透過 JavaScript 的「hover」類別（例如，theElement.classList.add(“hover”)）不會觸發所需的視覺效果。

答案：

不幸的是，由於可信事件的性質，在純 JavaScript 中模擬真實的滑鼠懸停事件是不可行的。

在網頁瀏覽器中，某些事件（例如由使用者互動觸發的事件）被認為是可信的。相反，JavaScript 產生的事件（如您嘗試模擬的事件）是不受信任的。不受信任的事件無法執行某些操作，包括觸發大多數 HTML 元素的預設操作（例如懸停效果）。

解決方案：

唯一可行的選擇是手動透過分別使用mouseover 和mouseout 事件偵聽器在目標元素上新增和刪除類別來管理懸停效果。這是一個範例：

const hoverElement = document.querySelector("selector");

hoverElement.addEventListener("mouseover", () => {
  hoverElement.classList.add("hover");
});

hoverElement.addEventListener("mouseout", () => {
  hoverElement.classList.remove("hover");
});

以上是JavaScript 可以在沒有滑鼠互動的情況下真正模擬 CSS :hover 效果嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！