Comment faire pour forcer un état de pointage avec jQuery?

S'il vous plaît, considère ce code CSS:

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

Ce code HTML:

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

Et, enfin, ce code JS:

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

Je voudrais faire mon lien utilise son pseudo-classe :hover lorsque le bouton est cliqué.
J'ai essayé de déclencher des événements comme mousemove, mouseenter, hover etc, mais tout le monde travaille.
Notez que je veux forcer l'utilisation de la mon CSS pseudo-classe :hover spécification et de ne pas utiliser quelque chose comme:

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

Quelqu'un sais comment dois-je faire? Je vous remercie beaucoup.

InformationsquelleAutor MCardinale | 2010-02-18
  1. 110

    Vous aurez à utiliser une classe, mais ne vous inquiétez pas, c'est assez simple. D'abord, nous allons assigner votre :hover règles ne s'appliquent pas uniquement physiquement-plané des liens, mais aussi pour les liens qui ont la classe hovered.

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

    Ensuite, lorsque vous cliquez sur #btn, nous allons basculer le .hovered classe sur le #link.

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

    Si le lien a la classe déjà, il sera supprimé. Si il n'a pas la classe, il sera ajouté.

    • #jonathan son travail très bien. est-il un autre moyen pour mettre en œuvre la même sans l'ajout d'un.a plané.
    • l'extraction de la réponse de Mike. Le déclenchement de 'mouseover' au lieu de 'hover' est-ce que vous cherchez.
    • Merci @andyzinsser sa fonctionne bien 🙂
    • Avait peur de les dupliquer et de ne pas penser à cette solution. Merci!
    • Remarque: Pour moi, cette solution ne fonctionnait que lorsque j'ai dupliqué le CSS définition sans a:focus en elle.
    InformationsquelleAutor Sampson
  2. 31

    Aussi, vous pouvez essayer de déclencher un passage de la souris.

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

    Ne sais pas si cela fonctionne pour votre scénario spécifique, mais j'ai eu du succès déclenchement du passage de la souris au lieu de planer pour les différents cas.

    • fwiw, j'ai trouvé que ce ne sera pas charger les images si il y a une règle de style pour les :hover qui spécifie une image d'arrière-plan.
    • la souris est différente de CSS :hover. Si cela ne fonctionne pas. Il ne peut travailler que dans une situation où un événement mouseover a été lié à quelque chose.
    • C'est marrant, j'ai continué à essayer différentes façons d'ajouter des classes, mais cela ne résoudra pas mon problème... sa réponse utile dans les circonstances.
    • Je pense que cette méthode est préférable à celui ci-dessus comme il n'a pas besoin d'une autre classe pour être ajoutés pour modifier les éléments de style.
    InformationsquelleAutor Mike
  3. 0

    Je pense que la meilleure solution que j'ai rencontré est sur cette stackoverflow.
    Ce court jQuery permet à tous vos effets de survol à afficher sur cliquez ou touchez..

    Pas besoin d'ajouter quoi que ce soit à l'intérieur de la fonction.

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

    Espère que cette aide.

    InformationsquelleAutor Digggid