如何在纯JavaScript中模拟鼠标悬停以激活CSS":hover"？

Question

我一直试图找到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);

Answer 3

背景

我在尝试编写自动化测试时偶然发现了这个问题,以验证给定页面上的某些元素集合都接收到由css为悬停事件设置的一些css属性.

虽然上面的答案完美地解释了,为什么不可能简单地通过JS触发悬停事件然后证明一些感兴趣的css值,它确实回答了最初的问题"如何在纯JavaScript中模拟鼠标悬停激活CSS":悬停"？" 只是部分.

放弃

这不是一个高效的解决方案.我们仅将其用于自动化测试,其中性能不是问题.

解

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文件,替换:用空字符串悬停并应用它.这具有以下效果:应用所有:悬停样式.现在,可以通过停止模拟来探测啸叫风格并恢复到初始状态.

为什么我们将悬停效果应用于整个文档,而不仅仅是通过从工作表中获取感兴趣的元素然后执行element.css(...)？

完成后,样式将内联应用,这将覆盖其他样式,这些样式可能不会被原始的css悬停样式覆盖.

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

这不是高效的,所以最好不要.如果必须,可以使用element.is(selectorOfInterest)检查样式是否适用于您的元素并仅使用这些样式.

例

在Jasmine你现在可以执行:

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");
    });
});

Answer 4

您可以使用pseudo:styler，这是一个可以将CSS伪类应用于元素的库。

(async () => {
  let styler = new PseudoStyler();
  await styler.loadDocumentStyles();
  document.getElementById('button').addEventListener('click', () => {
    const element = document.getElementById('test')
    styler.toggleStyle(element, ':hover');
  })
})();

免责声明：我是该库的合著者。我们设计它还支持跨源样式表，特别是在您可能无法控制页面 CSS 规则的 Chrome 扩展中使用。

Answer 5

我最常做在这种情况下是使用JavaScript添加类..和将相同CSS的:hover这一类

尝试使用

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

或者对于旧浏览器:

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

onmouseout当你离开元素时,你必须用它去除"悬停"类...