Cómo forzar un estado de vuelo estacionario con jQuery?

Question

Por favor, considerará si el código CSS:

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

Este código HTML:

<a href="#" id="link">Link</a> 
<button id="btn">Click here</button> 

Y, por último, este JS código:

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

me gustaría hacer mis usos de enlace su pseudo-clase: desplace el cursor cuando se hace clic en el botón. Intenté desencadenar eventos como mousemove, mouseenter, hover, etc., pero cualquiera trabaja. en cuenta que quiero forzar el uso del CSS mi pseudo-clase: hover especificación y no usar algo como:

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

Alguien sabe cómo puedo hacer esto? Muchas gracias.

Answer 1

Tendrás que usar una clase, pero no te preocupes, es bastante simple. Primero, asignaremos sus reglas :hover para que no solo se apliquen a enlaces físicamente suspendidos, sino también a enlaces que tengan el nombre de clase hovered.

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

A continuación, al hacer clic en #btn, vamos a alternar la clase .hovered en el #link.

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

Si el enlace ya tiene la clase, se eliminará. Si no tiene la clase, se agregará.

Answer 2

Además, podría intentar activar un mouseover.

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

No estoy seguro si esto funcionará para su situación específica, pero he tenido éxito activación encima del ratón en lugar de flotar durante varios casos.