Comment faire .hover fonctionner correctement dans jQuery

Question

Je suis en train de faire quelque chose comme ceci:

afficher une icône - le vol stationnaire devient un texte - sur mouseout devient une icône.

Voici ce que j'ai (ce qui ne fonctionne pas à droite):

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>) 
     } 
    ); 

Merci beaucoup Pour votre aide.

Answer 1

fixant l'exemple

Je suis votre exemple travailler dans un jsFiddle https://jsfiddle.net/fvz70ne4/

il y a quelques petits problèmes avec votre exemple:

• jquery hasClass(...) seulement contrôles si un élément a la classe donnée et renvoie vrai ou faux. Ne pas prendre un sélecteur comme ou div#someId. ces fonctions prennent uniquement un nom de classe, sous forme de chaîne, qui ne comporte pas de point de début. Le html utilise fa-free-code-camp, le js utilise fa-freecodecamp. Je n'ai ni l'un ni l'autre, donc j'ai utilisé le code-fa à la place.
• la fonction mouse-out manque de guillemets autour du contenu <i...></i>, qui est une erreur de script.

spécificité css

après fixation tous theese les travaux de vol stationnaire, mais les styles fcc-hover ne le font pas. à l'aide des outils de débogage pour inspecter l'élément p montre ce qui se passe:

planant au-dessus de l'icône ajoute la classe fcc-vol stationnaire

mais les règles de style .fcc-hover sont ignorés

c'est en raison de la spécificité sélecteur css

spécificité

décide qui gagne quand sélecteur ils ont des styles contradictoires, comme « texte 20px i n vert "et" texte 10px en gris "

.fcc et .cfc-hover ont la même spécificité car ils sont tous les deux sélecteurs de classe 1.Je ne vais pas expliquer toute cette question ici, mais l'ordre de base est « sélecteurs ID » #someID, sélecteurs de classe comme .fcc et tapez finalement sélecteurs comme p

un id va gagner sur un certain nombre de sélecteurs de classe, mais dans chaque catégorie plus sélecteurs gagner, donc 2 sélecteurs de classe sont plus forts qu'un sélecteur de classe. lorsque deux sélecteurs sont identiques, l'ordre dans le CSS décide. .fcc arrive en dernier, .cfc gagne.

Pour résoudre ce problème je l'ai utilisé « .fcc.fcc-vol stationnaire », car 2 sélecteurs de classe est plus forte que 1

vacillant changer la taille de la police fait et-vient le scintillement texte parce que les changements d'éléments sous votre souris. Pour éviter cela, vous devez vous assurer que la taille et la position de l'élément ne changent pas à cause de la classe fcc-hover.