如何在纯JavaScript中模拟激活CSS的鼠标悬停悬停；？

我一直试图在Chrome中找到模拟

mouseover

的代码，但即使启动了“mouseover”侦听器，CSS“hover”声明也从未设置过

我还试着做：

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

但是，似乎没有任何东西将元素更改为其

悬停声明中声明的内容

这可能吗？
在这种情况下，我通常使用javascript添加一个类。。并将与
：hover
相同的
CSS
附加到此类

试用

theElement.addEventListener('onmouseover', 
    function(){ theElement.className += ' hovered' });

或对于较旧的浏览器：

theElement.onmouseover = function(){theElement.className += ' hovered'};

当然，当您离开元素时，您必须使用
onmouseout
删除“hovered”类…
在这种情况下，我通常使用javascript添加一个类。。并将与
：hover
相同的
CSS
附加到此类

试用

theElement.addEventListener('onmouseover', 
    function(){ theElement.className += ' hovered' });

或对于较旧的浏览器：

theElement.onmouseover = function(){theElement.className += ' hovered'};

当您离开元素时，您当然必须使用
onmouseout
删除“hovered”类…
您不能。这不是一个好主意

用户代理生成的事件（作为用户交互的结果或DOM更改的直接结果）受用户代理的信任，其权限不授予脚本通过DocumentEvent.createEvent（“Event”）方法生成的事件，使用Event.initEvent（）方法修改，或通过EventTarget.dispatchEvent（）方法进行调度。受信任事件的isTrusted属性值为true，而不受信任事件的isTrusted属性值为false

大多数不受信任的事件不应触发默认操作，但click或DOMActivate事件除外

您必须在mouseover/mouseout事件中手动添加/删除类。
您不能。这不是一个好主意

用户代理生成的事件（作为用户交互的结果或DOM更改的直接结果）受用户代理的信任，其权限不授予脚本通过DocumentEvent.createEvent（“Event”）方法生成的事件，使用Event.initEvent（）方法修改，或通过EventTarget.dispatchEvent（）方法进行调度。受信任事件的isTrusted属性值为true，而不受信任事件的isTrusted属性值为false

大多数不受信任的事件不应触发默认操作，但click或DOMActivate事件除外

您必须在mouseover/mouseout事件中手动添加/删除类。
Background
我在尝试编写自动化测试时偶然发现了这个问题，以验证给定页面上的某一组元素是否都具有css为悬停事件设置的某一组css属性

虽然上面的答案完美地解释了为什么不可能简单地通过JS触发悬停事件，然后探测一些感兴趣的css值，但它确实回答了最初的问题“如何在纯JavaScript中模拟激活css的鼠标悬停”：hover“？”仅部分地回答了这个问题

免责声明
这不是一个高性能的解决方案。我们只在自动化测试中使用它，性能不受关注

解决方案
simulatecsevent=函数（类型）{
变量id='simulatedStyle'；
var generateEvent=函数（选择器）{
var style=“”；
for（document.styleSheets中的var i）{
var rules=document.styleSheets[i].cssRules；
for（规则中的var r）{
if（规则[r].cssText&&rules[r].selectorText）{
如果（规则[r].selectorText.indexOf（选择器）>-1）{
var regex=new RegExp（选择器，“g”）
var text=rules[r].cssText.replace（regex，“”）；
样式+=文本+“\n”；
}
}
}
}
$（“head”）。追加（“+style+”）；
};
var stopEvent=函数（）{
$（“#”+id）.remove（）；
};
开关（类型）{
案例“悬停”：
返回generateEvent（“：悬停”）；
案例“停止”：
返回stopEvent（）；
}
}

解释
generateEvent读取所有css文件，用空字符串替换：hover并应用它。其效果是应用所有：悬停样式。现在，可以通过停止模拟来探测howered样式并返回初始状态

为什么我们要对整个文档应用悬停效果，而不仅仅是对感兴趣的元素应用悬停效果，方法是从表单中获取悬停效果，然后执行element.css（…）

这样，样式将被内联应用，这将覆盖其他样式，而这些样式可能不会被原始css悬停样式覆盖

现在如何模拟单个元素的悬停

这不是性能，所以最好不要。如果必须，您可以使用element.is（SelectorFinTerest）检查样式是否适用于您的元素并仅使用这些样式

例子
在Jasmine中，您可以执行以下操作：

description（“模拟CSS事件”，函数（））{
它（“模拟链接悬停”，函数（）{
期望（$（“a”）.css（“文本装饰”）.toBe（“无”）；
模拟事件（“悬停”）；
期望（$（“a”）.css（“文本装饰”）.toBe（“下划线”）；
模拟事件（“停止”）；
期望（$（“a”）.css（“文本装饰”）.toBe（“无”）；
});
});
Background
我在尝试编写自动化测试时偶然发现了这个问题，以验证给定页面上的某一组元素是否都具有css为悬停事件设置的某一组css属性

虽然上面的答案完美地解释了为什么不可能简单地通过JS触发悬停事件，然后探测一些感兴趣的css值，但它确实回答了最初的问题“如何在纯JavaScript中模拟激活css的鼠标悬停”：hover“？”仅部分地回答了这个问题

免责声明
这不是一个好主意
(async () => {
  let styler = new PseudoStyler();
  await styler.loadDocumentStyles();
  document.getElementById('button').addEventListener('click', () => {
    const element = document.getElementById('test')
    styler.toggleStyle(element, ':hover');
  })
})();