multiple - ¿Cómo forzar un estado flotante con jQuery?

jquery css width

Question

Por favor, considere este 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, finalmente, este código JS:

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

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

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

Alguien sabe como hago esto? Muchas gracias.

Answer 1

Además, podrías intentar disparar un mouseover.

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

No estoy seguro de si esto funcionará para su escenario específico, pero he tenido éxito al activar el mouseover en lugar de desplazarme para varios casos.

Answer 2

Creo que la mejor solución que he encontrado es en este . Este breve código jQuery permite que todos sus efectos de desplazamiento se muestren al hacer clic o al tocar ...
No es necesario agregar nada dentro de la función.

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

Espero que esto ayude.

Answer 3

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

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

A continuación, cuando haga clic en #btn , alternaremos la clase .hovered en el #link .

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

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