Wie .hover Arbeit richtig in jQuery

Question

Ich versuche, so etwas machen zu machen:

Display ein Symbol - auf schweben wird ein Text - auf mouseout ein Symbol wird wieder.

Hier ist, was ich habe (was nicht richtig funktioniert):

html:

<p class="fcc"><i class="fa fa-free-code-camp fa-lg"></i></p> 

CSS:

.fcc-hover { 
    font-family: "Unica One", sans-serif; 
    font-size: 10px; 
    color: grey; 
} 

    .fcc { 
     margin-top: -37px; 
     font-family: "Raleway", sans-serif; 
     font-size: 20px; 
     color: #BADA55; 
    } 

jQuery:

$('.fcc').hover(
     function() { 
     var newText = $(this).text('A Project for freeCodeCamp'); 
     newText.hasClass('.fcc-hover'); 
     }, function() { 
     $(this).removeClass('.fcc-hover'); 
     $(this).html(<i class="fa fa-freecodecamp fa-lg"></i>) 
     } 
    ); 

Vielen Dank für deine Hilfe.

Answer 1

das Beispiel Befestigungs

Ich habe Ihr Beispiel in einem jsfiddle Arbeits https://jsfiddle.net/fvz70ne4/

gibt es ein paar kleinere Probleme mit Ihrem Beispiel:

• jquery hasClass(...) nur prüft, ob ein Element hat die gegebene Klasse und gibt wahr oder falsch zurück.
• hasClass(...), addClass(...) und removeClass(...) nehmen Sie keinen Selektor wie .some-class oder div#someId. Diese Funktionen nehmen nur einen Klassennamen als String an, der keinen führenden Punkt enthält.
• das HTML verwendet fa-free-Code-Camp, die js verwendet fa-freecodecamp. Ich habe keine These, also habe ich stattdessen fa-code benutzt.
• die Mouse-Out-Funktion fehlt Anführungszeichen um den <i...></i> Inhalt, der ein Skriptfehler ist.

CSS Spezifität

nach all diesem Fall entweder die Hover-Werke Fixierung, aber die kfz-Hover-Arten nicht. mit den Debug-Tool, um das p-Element zu inspizieren zeigt, was los ist:

über das Symbol schweben fügt die kfz-Hover-Klasse

aber die .fcc-Hover-Stilregeln ignoriert werden

Dies ist wegen Css Selektor Spezifität

Spezifität entscheidet, welcher Selektor gewinnt, wenn sie widersprüchliche Stile haben, wie "20px Text i n grün "und" 10px Text in grau "

.fcc und .fcc-Hover haben die gleiche Spezifität, da sie beide 1 Klassenselektor sind.ich werde nicht dieses ganze Thema hier erklären, aber die Grundordnung ist „ID-Selektoren“ #someID, Klasse Selektoren wie .fcc und schließlich Selektoren geben wie p

eine ID wird eine beliebige Anzahl von Klassen-Selektoren gewinnen, aber in jeder Kategorie mehr Selektoren gewinnen, also sind 2 Klassenselektoren stärker als ein Klassenselektor. Wenn zwei Selektoren identisch sind, entscheidet die Reihenfolge im css. .fcc kommt zuletzt, .fcc gewinnt.

dies zu beheben i „.fcc.fcc-schweben“, weil zwei Klassen-Selektoren ist stärker als 1

Flackern Ändern der Schriftgröße macht den Text flackern hin und her, weil die Elementänderungen verwendet unter deine Maus. Um dies zu vermeiden, müssen Sie sicherstellen, dass sich die Größe und Position des Elements aufgrund der Klasse fcc-hover nicht ändert.