Come forzare uno stato di hover con jQuery?

Per favore, questo codice CSS:

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

Questo codice HTML:

 Link  

E, infine, questo codice JS:

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

Vorrei fare in modo che il mio link utilizzi la sua pseudo-class: passa il mouse quando si fa clic sul pulsante. Ho provato ad triggersre eventi come mousemove, mouseenter, hover etc, ma chiunque lavora. Si noti che voglio forzare l’uso della mia pseudo-class CSS: specifica hover e non usare qualcosa come:

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

Qualcuno sa come faccio questo? Grazie mille.

Dovrai usare una class, ma non ti preoccupare, è piuttosto semplice. Per prima cosa assegneremo le tue regole :hover non solo per i collegamenti fisicamente disponibili, ma anche per i link che hanno il nomenclatura hovered .

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

Successivamente, quando fai clic su #btn , .hovered class .hovered sul #link .

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

Se il link ha già la class, verrà rimosso. Se non ha la class, verrà aggiunto.

Inoltre, potresti provare a innescare un passaggio del mouse.

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

Non sono sicuro se questo funzionerà per il tuo scenario specifico, ma ho avuto successo triggersndo il mouseover invece del passaggio del mouse per vari casi.

Penso che la soluzione migliore che ho incontrato sia su questo stackoverflow . Questo breve codice jQuery consente di mostrare tutti i tuoi effetti al passaggio del mouse su clic o touch ..
Non c’è bisogno di aggiungere nulla all’interno della funzione.

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

Spero che questo ti aiuti.