100

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

我也尝试过：

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

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

这可能吗？

4

6 回答 6

121

你不能。这不是一个可信事件。

由用户代理生成的事件，无论是作为用户交互的结果，还是作为对 DOM 更改的直接结果，都受到用户代理的信任，用户代理具有通过 DocumentEvent.createEvent 脚本生成的事件所不具备的权限("Event") 方法，使用 Event.initEvent() 方法修改，或通过 EventTarget.dispatchEvent() 方法调度。受信任事件的 isTrusted 属性值为 true，而不受信任事件的 isTrusted 属性值为 false。

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

您必须手动添加一个类并在 mouseover/mouseout 事件上添加/删除它。

于 2013-06-21T02:18:03.413 回答
60

您可以像这样模拟鼠标悬停事件：

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);
于 2018-05-07T03:34:37.943 回答
17

背景

我在尝试编写自动化测试时偶然发现了这个问题，以验证给定页面上的一组元素都接收到由 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 文件，用空字符串替换 :hover 并应用它。这具有应用所有 :hover 样式的效果。现在，人们可以通过停止模拟来探索一种风格并恢复到初始状态。

为什么我们要对整个文档应用悬停效果，而不仅仅是通过从工作表中获取感兴趣的元素，然后执行 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");
    });
});
于 2016-05-19T08:08:52.813 回答
6

在这种情况下我通常做的是使用javascript添加一个类..并将与该类相同CSS的附加:hover到这个类

尝试使用

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

或者对于较旧的浏览器：

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

当您离开元素时，您当然必须使用onmouseout删除“悬停”类...

于 2013-06-21T02:09:42.703 回答
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 扩展程序中使用。

于 2019-01-16T08:26:53.607 回答
3

我假设您想在 dom 操作后检查 CSS，但是一旦您将鼠标移回 devtools，该事件就不再在该 html 元素上处于活动状态。您可能希望在 devtools 中为您的 javascript 事件提供类似 :hover 选项的内容。那不存在，但你可以模拟它。

  1. 打开您的 devtools 并单击它以使其处于活动状态。
  2. 在您感兴趣的元素上触发事件。
  3. 在不移动鼠标的情况下，使用 ctrl + shift + p 打开 devtools 命令面板，然后使用键盘选择“禁用 javascript”。

由于 javascript 被禁用，它没有机会再次修改元素。您可以转到 devtools 并检查 css 和 html，就好像您在悬停、单击或用它做其他事情一样。完成后，再次转到命令面板并选择“启用 javascript”。

于 2020-04-30T08:16:09.183 回答