如何在纯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 id="name">My Name</div>

JavaScript的

var element = document.getElementById('name');element.addEventListener('mouseover', function() {
  console.log('Event triggered');});var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true});element.dispatchEvent(event);