2010-02-18 23 views
56

Bitte, considere diese CSS-Code:Wie erzwinge einen Hover-Status mit jQuery?

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 diese JS-Code:

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

Ich möchte meinen Link Verwendungen machen seine Pseudo-Klasse: Hover, wenn auf die Schaltfläche geklickt wird. Ich habe versucht, Ereignisse wie Mauszeiger, Mauszeiger, Mauszeiger usw. auszulösen, aber jeder arbeitet. Beachten Sie, dass ich die Verwendung der meine CSS Pseudo-Klasse erzwingen wollen: Spezifikation schweben und nicht so etwas wie verwenden:

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

Irgend jemand weiß, wie kann ich das tun? Vielen Dank.

Antwort

103

Sie müssen eine Klasse verwenden, aber keine Sorge, es ist ziemlich einfach. Zunächst weisen wir Ihre :hover Regeln so zu, dass sie nicht nur auf physisch verschobene Links angewendet werden, sondern auch auf Links mit dem Klassennamen hovered.

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

Als nächstes, wenn Sie #btn klicken, werden wir die .hovered Klasse auf dem #link wechseln.

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

Wenn die Verknüpfung die Klasse bereits enthält, wird sie entfernt. Wenn es die Klasse nicht hat, wird sie hinzugefügt.

+0

#jonathan funktioniert gut. Gibt es eine andere Möglichkeit, dasselbe zu implementieren, ohne a.hovered hinzuzufügen. –

+0

@ArulSidthan Kasse die Antwort von Mike. Wenn Sie "Mouseover" statt "Hover" auslösen, tun Sie das, wonach Sie suchen. – andyzinsser

+0

Dank @andyzinsser funktioniert es gut :) –

24

Sie könnten auch versuchen, einen Mouseover auszulösen.

Nicht sicher, ob dies für Ihr spezifisches Szenario funktioniert, aber ich hatte Erfolg, mouseover anstelle von Hover für verschiedene Fälle auszulösen.

+5

fwiw, ich habe festgestellt, dass dies Bilder nicht laden wird, wenn es eine Stilregel für: hover gibt, die ein Hintergrundbild angibt. –

+10

Mouseover unterscheidet sich von CSS: Hover. Das wird also nicht funktionieren. Es kann nur in Situationen funktionieren, in denen ein mouseover -Ereignis an etwas gebunden wurde. –

+0

Lustig genug, ich habe versucht, verschiedene Möglichkeiten, Klassen hinzuzufügen, aber das hat mein Problem gelöst ... seine nützliche Antwort unter Umständen. – joshua

Verwandte Themen