$('#elm').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)Dies funktioniert in jedem Browser auf jedem Element, um Stiländerungen bei Hover zu unterstützen.
Klasse bei Hover hinzufügen/entfernen
Chris Coyier am
Ist es nicht einfacher, „toggleClass()“ zu verwenden????
Es gibt viele verschiedene Wege, dasselbe Ziel zu erreichen, es ist jedoch wertvoll, viele davon zu kennen!
Ich weiß, dass das etwa ein Jahr alt ist, aber der Grund, warum das Hinzufügen/Entfernen von Klassen manchmal geeigneter ist, ist, wenn Sie mehr als einen Auslöser auf einer Seite für dasselbe Element haben. Es ist einfach narrensicherer!
Absolut
$(‘.element’).hover(
function(){$(this).toggleClass(‘classname’);}
);
Danke :)
Einfacher, aber großartiger Code-Schnipsel.
Danke…
Danke für den Beitrag, das funktioniert gut, wenn Sie Cross-Browser-Kompatibilität wünschen und alle :hover-Klassen aus Ihrem CSS entfernen möchten.
Du hast mein Leben gerettet. Danke
Wie kommt es, dass es mit .click nicht funktioniert, aber mit hover? Das ergibt keinen Sinn. Was ich möchte, ist, dass beim Hovern über ein Listenelement die Hover-Farbe angezeigt wird, dann beim Klicken ein Div angezeigt wird (nach unten geschoben wird), dann möchte ich, dass das LI #Show eine gelbe background-color hat, und dann, wenn wieder geklickt wird, verschwindet das Div (Display:hidden) und dann möchte ich, dass das LI#Show wieder seinen normalen Zustand annimmt. Aber ich komme nur so weit. Wenn das li einmal geklickt wird, erscheint das div und die li-Farbe wird gelb, aber wenn ich erneut klicke, verschwindet das div, aber die Farbe verschwindet nicht.
Es könnte sein, dass dieser Code nicht mit click funktioniert, weil er dafür ausgelegt ist, die alte .hover()-Syntax zu verwenden, die zwei Funktionen benötigt, während .click() eine benötigt. Zunächst einmal ist die Methode, die verwendet werden sollte, wenn Sie jQuery 1.7 oder höher verwenden, jetzt .on(). Für das, was Sie suchen, könnte der richtige Code so etwas wie dieses jsfiddle sein
http://jsfiddle.net/CodeJunkie/nMjMX/
Danke, ich vergesse diese Methode immer.
Ich bin neu in JavaScript – könnten Sie eine Demo davon in Aktion posten oder darauf verweisen?
Ich habe versucht, #elm durch die ID meines Divs und „hover“ durch meine neue Klasse zu ersetzen, so:
Dann habe ich die neue Klasse gestylt. Wie habe ich es kaputt gemacht?
Tim, du wirst feststellen, dass du hier sowohl die Klasse hinzufügst als auch entfernst…
Du musst die Klasse auf ein anderes Ereignis anwenden…
@Tim: Das ist jQuery. Versuchen Sie dies
Sie müssen sicherstellen, dass die jQuery-Bibliothek auf der Seite referenziert ist (siehe Code unten) und dass der oben genannte Code DANACH kommt.
Stellen Sie dann sicher, dass Ihr HTML-Code etwas wie das hier enthält
Wenn Sie also die Webseite öffnen und mit der Maus über das Div fahren, sieht es so aus
Und wenn Sie die Maus vom Div wegbewegen, wird es wieder
Ähnlich können Sie auch Klassen ansprechen
In diesem Fall sollte Ihr HTML-Code so aussehen
@PeterGarrett: Bist du sicher? Ich denke, wir brauchen beide Zeilen, sonst scheint es nicht zu funktionieren. ↑
Danke @Aahan
Es ist sehr hilfreich für mich ...
Ich denke, removeClass sollte zuerst kommen, um jede zuvor hinzugefügte Klasse zu entfernen, bevor eine Klasse hinzugefügt wird.
@erick jQuerys addClass behandelt diese Logik, es wird nicht hinzugefügt, wenn die Klasse bereits existiert.
$(document.createElement('div')) .addClass('test') .addClass('test') .attr('class'); //returns "test"Ich versuche, Hover nur von einer smallButton-Klasse zu entfernen, nicht von der gesamten Klasse. Ich versuche nur, button.smallButton:hover zu entfernen und .smallButton weiterhin zu verwenden. Ist das möglich?
jQuery(document).ready(function($){
$(‘#buttonId’).hover(
function(){ $(this).removeClass(‘button.smallButton:hover’)}
)
});
a:hover{ color:#666;}
Hey, das war so großartig!! Ich bin super begeistert, das herausgefunden zu haben. Ich habe dies (teilweise) verwendet, um ein Menü zu erstellen, das ich wirklich in SharePoint hinzufügen musste.
Ich brauchte einen Schalter für die aktive Klasse und dies gab mir das Gerüst, um das zu erreichen.
Wenn Sie zwischen 2 verschiedenen Klassen wechseln möchten, anstatt eine einzelne Klasse wie in meinem Warenkorb-Seiten-Fall hinzuzufügen und zu entfernen, dann funktioniert das…
(Hinweis: Ich habe auch ähnlichen Code für ‚fa-minus-square‘ und ‚fa-minus-square-o‘ auf meinem ‚#quantity_less_‘ + line_item_id Steuerelement)
Wenn $ nicht definiert ist, verwenden Sie dies
jQuery(document).ready(function( $ ) {
$(‘.menu-item-has-children’).hover(
function(){ $(this).addClass(‘open’); },
function(){ $(this).removeClass(‘open’); }
);