如何在纯JavaScript中模拟鼠标hover来激活CSS“：hover”？
我一直在试图find代码来模拟Chrome中的mouseover ，但即使“鼠标hover”的侦听器被解雇，CSS“hover”声明从来没有设置！
我也试着做：
//Called within mouseover listener theElement.classList.add("hover");
但似乎没有任何东西可以改变它在hover声明中声明的内容。
这可能吗？
你不能。 这不是一个值得信赖的事件 。
用户代理生成的事件（作为用户交互的结果）或作为DOM更改的直接结果，都受到用户代理的信任，这些用户代理的权限不受脚本通过DocumentEvent.createEvent生成的事件的影响（“Event”）方法，使用Event.initEvent（）方法修改，或通过EventTarget.dispatchEvent（）方法分派。 受信任事件的isTrusted属性的值为true，而不受信任事件的isTrusted属性值为false。
大多数不受信任的事件不应该触发默认操作 ，除了点击或DOMActivate事件。
你必须添加一个类，并手动添加/删除鼠标hover/鼠标事件。
背景
在试图编写自动化testing时，我偶然发现了这个问题，以validation给定页面上的某组元素是否具有由css设置的hover事件的一组css属性。
虽然上面的答案完美地解释了为什么不能简单地通过JS触发hover事件，然后certificate一些感兴趣的CSS值，但它确实回答了最初的问题：“如何在纯JavaScript中模拟鼠标hover来激活CSS“：hover”？“ 只有部分。
放弃
这不是一个高性能的解决scheme。 我们只将它用于自动化testing，而性能不是问题。
解
simulateCssEvent = function(type){ var id = 'simulatedStyle'; var generateEvent = function(selector){ var style = ""; for (var i in document.styleSheets) { var rules = document.styleSheets[i].cssRules; for (var r in rules) { if(rules[r].cssText && rules[r].selectorText){ if(rules[r].selectorText.indexOf(selector) > -1){ var regex = new RegExp(selector,"g") var text = rules[r].cssText.replace(regex,""); style += text+"\n"; } } } } $("head").append("<style id="+id+">"+style+"</style>"); }; var stopEvent = function(){ $("#"+id).remove(); }; switch(type) { case "hover": return generateEvent(":hover"); case "stop": return stopEvent(); } }
说明
generateEvent读取所有的css文件，replace：用一个空stringhover并应用它。 这样做的效果是，所有：hover样式都被应用。 现在可以通过停止仿真来探测一种风格的样式并回到初始状态。
为什么我们对整个文档应用hover效果，而不是仅仅为了感兴趣的元素，从表单中获取hover效果，然后执行element.css（…）？
如此做，样式将内联应用，这将覆盖其他样式，这可能不会被原始CSShover样式重写。
我现在将如何模拟单个元素的hover？
这不是高性能的，所以最好不要。 如果你必须，你可以检查element.is（selectorOfInterest），如果样式适用于你的元素，只使用这些样式。
例
在茉莉花你可以现在执行：
describe("Simulate CSS Event", function() { it("Simulate Link Hover", function () { expect($("a").css("text-decoration")).toBe("none"); simulateCssEvent('hover'); expect($("a").css("text-decoration")).toBe("underline"); simulateCssEvent('stop'); expect($("a").css("text-decoration")).toBe("none"); }); });
我通常在这种情况下做的是添加一个类使用JavaScript ..并附加相同的CSS作为:hover到这个类
尝试使用theElement.onmouseover=function(){theElement.className = 'hovered'};
当你离开元素时，你将不得不使用onmouseout去除“hover”类。
