如何在纯JavaScript中模拟鼠标悬停以激活CSS“：hover”？

Question

如何在纯JavaScript中模拟鼠标悬停以激活CSS“：hover”？

我一直试图找到mouseover在Chrome中模拟的代码，但即使“mouseover”监听器被触发，CSS“悬停”声明也永远不会被设置！

我也尝试过：

//Called within mouseover listener
theElement.classList.add("hover");

但似乎没有任何东西可以将元素更改为其hover声明中声明的内容。

这可能吗？

Answer 1

你不能。这不是一个值得信赖的事件。由用户代理生成的事件，或者作为用户交互的结果，或者作为DOM更改的直接结果，由用户代理信任的事件具有通过DocumentEvent.createEvent脚本生成的事件所不具有的权限（“Event”）方法，使用Event.initEvent（）方法修改，或通过EventTarget.dispatchEvent（）方法调度。受信任事件的isTrusted属性值为true，而不受信任事件的isTrusted属性值为false。大多数不受信任的事件不应触发默认操作，但click或DOMActivate事件除外。您必须手动添加一个类并在mouseover / mouseout事件上添加/删除它。

Answer 2

您可以像这样模拟鼠标悬停事件：HTML<div&nbsp;id="name">My&nbsp;Name</div>JavaScript的var&nbsp;element&nbsp;=&nbsp;document.getElementById('name');element.addEventListener('mouseover',&nbsp;function()&nbsp;{ &nbsp;&nbsp;console.log('Event&nbsp;triggered');});var&nbsp;event&nbsp;=&nbsp;new&nbsp;MouseEvent('mouseover',&nbsp;{ &nbsp;&nbsp;'view':&nbsp;window, &nbsp;&nbsp;'bubbles':&nbsp;true, &nbsp;&nbsp;'cancelable':&nbsp;true});element.dispatchEvent(event);