jQuery auf schweben mit Mehrfachfunktion() ruft funktioniert nicht wie ich

Question

erwartet

Hallo, ich versuche, das zu tun, folgende:

onMouseOver Ich möchte: 1. Entfernen Sie die vorhandene Klasse (navLinkTD), die eine schwarz liefert Grenze um den Tisch. 2. Fügen Sie eine neue Klasse (navLinkTDActive) hinzu, die einen Rahmen um den oberen, linken und rechten Rand bereitstellt, aber ein Hintergrundbild aufweist, bei dem der untere Rand mit einem kleinen Pfeil geändert wird.

Sobald die Maus, um den aktiven Bereich verlassen hat, ich will: 3. ich die navLinkTDActive Klasse 4. entfernen will ich will die navLinkTD Klasse erneut hinzufügen

Was passiert ist, dass onMouseOver/Hover alles Styling ist entfernt. Sobald ich den Cursor aus der aktiven Region entfernt habe, erscheint die navLinkTDActive-Klasse.

Hier ist der Abschnitt des Codes das Problem verursacht: -

$(".navLinkTD").hover(
     function() { $(this).removeClass("navLinkTD"); },         
     function() { $(this).addClass("navLinkTDActive"); }, 
     function() { $(this).removeClass("navLinkTDActive"); }, 
     function() { $(this).addClass("navLinkTD"); } 
     ); 

Answer 1

Sie vorbei 4 Argumente an die Hover-Funktion, wo es akzeptiert nur 2. Versuchen Sie den Code wie folgt neu anordnen:

$(".navLinkTD").hover(
     function() { 
       $(this).removeClass("navLinkTD");                
       $(this).addClass("navLinkTDActive"); 
     }, 
     function() { 
       $(this).removeClass("navLinkTDActive");   
       $(this).addClass("navLinkTD"); 
     } 
); 

Seit jquery Verkettungs unterstützt können Sie optional die Aussagen diejenigen reduzieren, wie:

$(this).removeClass("navLinkTD").addClass("navLinkTDActive"); 

Answer 2

Ihre einzige Notwendigkeit 2 Funktionen. Eins für Über und eins für Außen. Kombiniere sie.

Answer 3

.hover benötigt nur zwei Funktionsparameter; versuchen Sie dies:

$(".navLinkTD").hover(
     function() { $(this).removeClass("navLinkTD").addClass("navLinkTDActive"); }, 
     function() { $(this).removeClass("navLinkTDActive").addClass("navLinkTD"); } 
     );