Wie erzwinge ich einen Schwebezustand mit jQuery?

70

Bitte beachten Sie diesen CSS-Code:

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

Dieser HTML-Code:

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

Und schließlich dieser JS-Code:

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

Ich möchte, dass mein Link seine Pseudoklasse verwendet: Hover, wenn auf die Schaltfläche geklickt wird. Ich habe versucht, Ereignisse wie Mausbewegung, Mouseenter, Hover usw. auszulösen, aber jeder arbeitet. Beachten Sie, dass ich die Verwendung der Hover-Spezifikation my CSS pseudo-class: hover erzwingen und nicht Folgendes verwenden möchte:

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

Jemand weiß, wie ich das mache? Vielen Dank.

jquery css MCardinale
quelle

Antworten:

116

Sie müssen eine Klasse verwenden, aber keine Sorge, es ist ziemlich einfach. Zuerst weisen wir Ihre :hoverRegeln nicht nur für physisch schwebende Links zu, sondern auch für Links mit dem Klassennamen hovered.

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

Wenn Sie als Nächstes auf klicken #btn, schalten wir die .hoveredKlasse auf um #link.

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

Wenn der Link die Klasse bereits enthält, wird sie entfernt. Wenn die Klasse nicht vorhanden ist, wird sie hinzugefügt.

Sampson
quelle
#jonathan es funktioniert gut. Gibt es eine andere Möglichkeit, dasselbe zu implementieren, ohne a.hovered hinzuzufügen?
Arul Sidthan
@ArulSidthan checkout die Antwort von Mike. Das Auslösen von "Mouseover" anstelle von "Hover" macht das, wonach Sie suchen.
Andyzinsser
Hatte Angst vor Duplikaten und dachte nicht über diese Lösung nach. Vielen Dank!
Zachary Dahan
Hinweis: Für mich hat diese Lösung nur funktioniert, wenn ich die CSS-Definition ohne a:focussie dupliziert habe.
TheKarateKid
33

Sie können auch versuchen, ein Mouseover auszulösen.

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

Ich bin mir nicht sicher, ob dies für Ihr spezifisches Szenario funktioniert, aber ich hatte in verschiedenen Fällen Erfolg, Mouseover anstelle von Hover auszulösen.

Mike
quelle
5
fwiw, ich habe festgestellt, dass dies keine Bilder lädt, wenn es eine Stilregel für: hover gibt, die ein Hintergrundbild angibt.
Jon z
13
Mouseover unterscheidet sich von CSS: Hover. Das wird also nicht funktionieren. Dies kann nur in Situationen funktionieren, in denen ein Mouseover-Ereignis an etwas gebunden wurde.
Kushagra Gour
Komischerweise habe ich immer wieder verschiedene Möglichkeiten ausprobiert, um Klassen hinzuzufügen, aber dies hat mein Problem gelöst ... seine nützliche Antwort unter Umständen.
Joshua
Ich denke, diese Methode ist besser als die obige, da keine weitere Klasse hinzugefügt werden muss, um den Stil der Elemente zu ändern.
Digggid
0

Ich denke, die beste Lösung, die mir begegnet ist, ist dieser Stackoverflow . Mit diesem kurzen jQuery-Code können alle Hover-Effekte beim Klicken oder Berühren angezeigt werden. Sie
müssen der Funktion nichts hinzufügen.

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

Hoffe das hilft.

Digggid
quelle