Como forçar um estado de hover com jQuery?

Por favor, considere este código CSS:

a { color: #ffcc00; } a:hover { color: #ccff00; } 

Este código HTML:

 Link  

E, finalmente, esse código JS:

 $("#btn").click(function() { $("#link").trigger("hover"); }); 

Eu gostaria de fazer o meu link usa sua pseudo-class: passe o mouse quando o botão é clicado. Eu tentei acionar events como mousemove, mouseenter, hover etc, mas qualquer um trabalha. Observe que eu quero forçar o uso da pseudo-class my CSS: especificação de hover e não usar algo como:

 $("#link").css("color", "ccff00"); 

Alguém sabe como faço isso? Muito obrigado.

Você terá que usar uma class, mas não se preocupe, é bem simples. Primeiro, atribuiremos as regras :hover a não se aplicarem apenas a links fisicamente passados, mas também a links que tenham o nome da class hovered .

 a:hover, a.hovered { color: #ccff00; } 

Em seguida, quando você clicar em #btn , alternaremos a class .hovered no #link .

 $("#btn").click(function() { $("#link").toggleClass("hovered"); }); 

Se o link já tiver a class, ele será removido. Se não tiver a class, ela será adicionada.

Além disso, você pode tentar acionar um mouseover.

 $("#btn").click(function() { $("#link").trigger("mouseover"); }); 

Não tenho certeza se isso funcionará para seu cenário específico, mas tive sucesso ao ativar o mouseover em vez de passar o mouse em vários casos.

Acho que a melhor solução que encontrei está neste stackoverflow . Este pequeno código jQuery permite que todos os seus efeitos sejam mostrados ao clicar ou tocar.
Não há necessidade de adicionar nada dentro da function.

 $('body').on('touchstart', function() {}); 

Espero que isto ajude.