JavaScript 可以在没有鼠标交互的情况下真正模拟 CSS :hover 效果吗？

通过 JavaScript 模拟 CSS 悬停效果

问题：

是否可以使用纯 JavaScript 来模拟 CSS ":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中文网其他相关文章！