Como faço para simular um mouseover em JavaScript puro que ativa o CSS “: hover”?

Eu tenho tentado encontrar código para simular mouseover no Chrome, mas mesmo que o ouvinte “mouseover” seja triggersdo, a declaração “pairar” do CSS nunca é definida!

Eu tentei também fazer:

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

Mas nada parece mudar o elemento para o que é declarado em sua declaração hover .

Isso é possível?

   

Você não pode. Não é um evento confiável .

Os events que são gerados pelo agente do usuário, como resultado da interação do usuário ou como um resultado direto de alterações no DOM, são confiáveis ​​pelo agente do usuário com privilégios que não são concedidos a events gerados pelo script por meio do DocumentEvent.createEvent. (“Event”), modificado usando o método Event.initEvent (), ou despachado via o método EventTarget.dispatchEvent (). O atributo isTrusted de events confiáveis ​​tem um valor true, enquanto os events não confiáveis ​​têm um valor de atributo isTrusted como falso.

A maioria dos events não confiáveis ​​não deve acionar ações padrão , com exceção dos events click ou DOMActivate.

Você tem que adicionar uma class e adicionar / remover isso nos events mouseover / mouseout manualmente.

fundo

Eu tropecei nessa questão ao tentar escrever testes automatizados, para verificar, que um determinado conjunto de elementos em uma determinada página todos recebem o conjunto de algumas propriedades css definidas pelo css para events em foco.

Embora a resposta acima explique perfeitamente, por que não é possível simplesmente acionar o evento em foco por JS e depois obter uma prova de algum valor css de interesse, ele responde à pergunta inicial “Como simular um mouseover em JavaScript puro que ativa o CSS “: hover”? apenas parcialmente.

aviso Legal

Esta não é uma solução de desempenho. Usamos apenas para testes automatizados, nos quais o desempenho não é uma preocupação.

Solução

 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(""); }; var stopEvent = function(){ $("#"+id).remove(); }; switch(type) { case "hover": return generateEvent(":hover"); case "stop": return stopEvent(); } } 

Explicação

generateEvent lê todos os arquivos css, substitui: hover com uma string vazia e aplica-a. Isso tem o efeito de que todos os estilos hover são aplicados. Agora, pode-se sondar um estilo howered e voltar ao estado inicial, interrompendo a simulação.

Por que aplicamos o efeito de hover para todo o documento e não apenas para o elemento de interesse obtendo o das folhas e, em seguida, executando um element.css (…)?

Feito isso, o estilo seria aplicado em linha, isso replaceia outros estilos, que podem não ser anulados pelo estilo hover do css original.

Como eu poderia simular o hover para um único elemento?

Isso não é de alto desempenho, então é melhor não fazer isso. Se necessário, você pode verificar com o element.is (selectorOfInterest) se o estilo se aplica ao seu elemento e usar somente esses estilos.

Exemplo

No Jasmine você pode, por exemplo, executar agora:

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

O que eu costumo fazer neste caso é adicionar uma class usando javascript .. e append o mesmo CSS que o :hover para essa class

Tente usar

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

Ou para navegadores mais antigos:

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

você terá que usar onmouseout para remover a class “pairada” quando você deixar o elemento …

Você pode simular o evento mouseover assim:

HTML

 
My Name

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