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

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