如何在纯CSS中模拟鼠标悬停以激活CSS“：hover”？

我一直在尝试寻找mouseover在Chrome中进行模拟的代码，但是即使触发了“ mouseover”侦听器，也从未设置CSS“ hover”声明！

我也尝试过：

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

但是似乎没有什么可以将元素更改为其hover声明中声明的内容。

这可能吗？

你不能 这不是一个值得信任的事件。

由用户代理生成的事件，无论是由于用户交互还是由于DOM更改而直接产生的事件，都由用户代理信任，其特权不提供给脚本通过DocumentEvent.createEvent生成的事件。 （“事件”）方法，可以使用Event.initEvent（）方法进行修改，也可以通过EventTarget.dispatchEvent（）方法进行调度。受信任事件的isTrusted属性值为true，而不受信任事件的isTrusted属性值为false。

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

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

您可以像这样模拟mouseover事件：

的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);

背景

在尝试编写自动化测试时，我偶然发现了这个问题，以验证给定页面上的所有特定元素集都具有css为on悬停事件设置的css属性集。

尽管上面的答案可以完美地说明问题，但为什么不能简单地通过JS触发悬停事件，然后探究一些感兴趣的CSS值，却确实回答了最初的问题“如何在激活CSS的纯JavaScript中模拟鼠标悬停” ：徘徊”？” 仅部分。

免责声明

这不是高效的解决方案。我们仅将其用于不关心性能的自动化测试。

解

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）检查样式是否适用于您的元素，并且仅使用这些样式。

例

在茉莉花中，您现在可以例如执行：

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.addEventListener('onmouseover', 
    function(){ theElement.className += ' hovered' });

或对于较旧的浏览器：

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

当然，onmouseout当您离开元素时，您将不得不使用删除“悬停的”类...

您可以使用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扩展程序中使用。

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

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

由于禁用了javascript，因此没有机会再次修改元素。您可以转到devtools并检查css和html，就好像您正在对其进行悬停，单击或执行其他操作一样。完成后，再次转到命令面板，然后选择“启用javascript”。