¿Cómo simulo un mouseover en JavaScript puro que activa el CSS ": hover"?

He estado tratando de encontrar código para simular mouseoveren Chrome, pero aunque el oyente "mouseover" se activa, la declaración CSS "hover" nunca se establece.

Intenté también hacer:

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

Pero nada parece cambiar el elemento a lo que se declara en su hoverdeclaración.

es posible?

No puedes. No es un evento confiable .

Los eventos generados por el agente de usuario, ya sea como resultado de la interacción del usuario o como resultado directo de cambios en el DOM, son confiables por el agente de usuario con privilegios que no se otorgan a los eventos generados por el script a través de DocumentEvent.createEvent. ("Event"), modificado con el método Event.initEvent () o enviado mediante el método EventTarget.dispatchEvent (). El atributo isTrusted de los eventos confiables tiene un valor de verdadero, mientras que los eventos no confiables tienen un valor de atributo isTrusted de falso.

La mayoría de los eventos que no son de confianza no deberían activar acciones predeterminadas , con la excepción de los eventos de clic o DOMActivate.

Tienes que agregar una clase y agregar / eliminar eso en los eventos de mouseover / mouseout manualmente.

Puede simular el evento de mouseover como este:

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

Antecedentes

Me encontré con esta pregunta mientras intentaba escribir pruebas automatizadas, para verificar que un cierto conjunto de elementos en una página determinada todos reciban algún conjunto de propiedades css establecidas por css para eventos de desplazamiento.

Si bien la respuesta anterior explica perfectamente por qué no es posible simplemente activar el evento de desplazamiento por JS y luego probar algún valor css de interés, responde la pregunta inicial "¿Cómo simulo un mouseover en JavaScript puro que activa el CSS" :flotar"?" sólo en parte.

Descargo de responsabilidad

Esta no es una solución eficaz. Lo usamos solo para pruebas automatizadas, donde el rendimiento no es una preocupación.

Solución

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

Explicación

generateEvent lee todos los archivos css, reemplaza: hover con una cadena vacía y lo aplica. Esto tiene el efecto de que se aplican todos los estilos: hover. Ahora se puede probar un estilo aullado y volver al estado inicial deteniendo la simulación.

¿Por qué aplicamos el efecto de desplazamiento para todo el documento y no solo para el elemento de interés obteniendo el de las hojas y luego realizamos un element.css (...)?

Hecho así, el estilo se aplicaría en línea, esto anularía otros estilos, que podrían no ser anulados por el estilo de desplazamiento css original.

¿Cómo simularía ahora el desplazamiento para un solo elemento?

Esto no funciona, así que mejor no lo haga. Si debe hacerlo, puede verificar con element.is (selectorOfInterest) si el estilo se aplica a su elemento y solo usar esos estilos.

Ejemplo

En Jasmine puedes, por ejemplo, realizar ahora:

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

Lo que suelo hacer en este caso es agregar una clase usando javascript ... y adjuntar lo mismo CSSque :hovera esta clase

Intenta usar

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

O para navegadores más antiguos:

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

por supuesto, tendrá que usar onmouseoutpara eliminar la clase "flotante" cuando deje el elemento ...

Puede usar pseudo: styler , una biblioteca que puede aplicar pseudoclases CSS a elementos.

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

Descargo de responsabilidad: soy coautor de esta biblioteca. Lo diseñamos para admitir adicionalmente hojas de estilo de origen cruzado, específicamente para su uso en extensiones de Chrome donde es probable que no tenga control sobre las reglas CSS de la página.

Supongo que desea inspeccionar el CSS después de la manipulación de dom, pero tan pronto como mueva el mouse de regreso a devtools, el evento ya no está activo en ese elemento html. Probablemente le gustaría tener algo como la opción: hover en devtools para sus eventos javascript. Eso no existe, pero puedes simularlo.

1. Abra sus devtools y haga clic en él para activarlo.
2. Activa el evento en el elemento que te interesa.
3. Sin mover el mouse, abra el panel de comandos de devtools con ctrl + shift + py seleccione 'deshabilitar javascript' con su teclado.

Dado que JavaScript está deshabilitado, no tiene la oportunidad de volver a modificar los elementos. Puede ir a devtools e inspeccionar css y html como si estuviera flotando, haciendo clic o haciendo otra cosa con él. Una vez que haya terminado, vaya al panel de comandos nuevamente y seleccione 'habilitar javascript'.