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

Question

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.

Answer 1

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 l' .hovered classe sur l' #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é.

Answer 2

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

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

Vous ne savez 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.

Answer 3

Appelant:

$("#element").focus();

entraînera l'application de CSS hover styles si l'élément est visible.

Donc, la lecture de propriétés CSS dans un forcé d'état de pointage est possible comme (a travaillé dans FF21):

    var e=$("#element").css({display:"block"}).trigger("focus");
    var colorHoverBorder = e.css('border-right-color');
   (.. now hide back element if needed & restore original focus ..)

Vous n'avez pas besoin de les appliquer .placez la classe, parce que parfois vous ne savez pas, ce que les classes doivent être appliquées. Inconvénient de cette approche est que concentré de terrain peuvent provoquer la page de comportement, tels que de changer de page/de saut de fond, etc.

Notez également, que si l'élément cible s'applique CSS effet de transition, puis styles CSS peuvent ne pas s'appliquer assez rapidement en raison de l'effet retard de l'exécution (j'ai passé un peu de temps pour comprendre cela).