Déclencher un HTML-classe avec fichier javascript externe

Question

J'utilise ces icônes sur ma page Web: http://fontawesome.io/examples/
Une classe prédéfinie qu'ils utilisent pour leurs icônes est fa-spin, et il fera le tour de l'icône (du-uh).
Je veux faire tourner les icônes à chaque fois qu'elles sont en vol stationnaire. Un extrait de mon HTML (La classe "fa fa-envelope" déclenche l'icône elle-même):

<a href="http://google.com" class="navbar-item">     
    <span class="icon"> 
     <i id="wantspin" class="fa fa-envelope fa-spin" onmouseover="dothis()"></i> 
    </span> 
</a> 

Je dois faire le déclencheur fa-spin -class en quelque sorte par la fonction onmouseover, non?

Voici mon code javascript, je sais que je ne l'ai pas fait encore rien, autre que liant le id du <i> avec la x variable mais je suis un peu perdu.

function dothis() 
{ 
var x = document.getElementById ("wantspin") 
} 

je l'espère, il est logique, et vous obtenez la question. J'apprécie toute aide, perspicacité, conseils et astuces, merci.

Answer 1

Vous pouvez saisir la règle fa-spin de feuille de style impressionnante police et d'ajouter un sélecteur :hover:

.spin:hover { 
 
    -webkit-animation: fa-spin 2s infinite linear; 
 
    animation: fa-spin 2s infinite linear 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a href="http://google.com" class="navbar-item"> 
 
    <span class="icon"> 
 
     <i class="fa fa-envelope spin"></i> 
 
    </span> 
 
</a>

Answer 2

réponse de Chris G est mieux. Voici une autre réponse dans le même sens que ce que vous essayiez de faire. Une approche encore meilleure serait de regarder dans jquery et d'utiliser des gestionnaires d'événements discrets à la place.

Vous pouvez ignorer mon code HTML, c'est juste là pour que l'exemple javascript fonctionne.

function dothis() { 
 
    var el = document.getElementById('wantspin'); 
 
    if (el) { 
 
    el.classList.add('fa-spin'); 
 
    } 
 
} 
 

 
function dothat() { 
 
    var el = document.getElementById('wantspin'); 
 
    if (el) { 
 
    el.classList.remove('fa-spin'); 
 
    } 
 
}

#wantspin { 
 
    height: 20px; 
 
    width: 20px; 
 
    background: blue; 
 
} 
 

 
.fa-spin { 
 
    border: 3px solid red; 
 
}

<a href="http://google.com" class="navbar-item"> 
 
    <span class="icon"> 
 
     <div id="wantspin" class="fa fa-envelope" onmouseover="dothis()" onmouseout="dothat()"></div> 
 
    </span> 
 
</a>

Answer 3

Pour ce faire, il suffit d'ajouter et de supprimer la classe et dans la javaScript ajouter une fonction onmouseout à votre élément. Votre code HTML sera celui-ci (Notez pas de classe fa-spin).

<a href="http://google.com" class="navbar-item"> 
    <span class="icon"> 
     <i id="wantspin" class="fa fa-envelope" onmouseover="dothis()" onmouseout="stopthis(this)"></i> 
    </span> 
</a> 

Et votre javascript.

function dothis() { 
    var x = document.getElementById("wantspin"); 
    x.classList.add("fa-spin"); 
} 
function stopthis() { 
    var x = document.getElementById("wantspin"); 
    x.classList.remove("fa-spin"); 
}