mit externen JavaScript-Datei

Question

Ich verwende diese Symbole auf meiner Webseite: http://fontawesome.io/examples/
Eine voreingestellte Klasse, die sie für ihre Symbole zu verwenden ist fa-spin, und es wird das Symbol Spin machen (du-uh).
Ich möchte die Symbole drehen, wenn sie schweben. Ein Ausschnitt meiner HTML (Die Klasse "fa fa-envelope" löst das Symbol selbst):

<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> 

Muss ich die fa-spin -Klasse Trigger machen irgendwie durch die Funktion onmouseover, nicht wahr?

Hier ist mein Javascript-Code, ich weiß, dass ich noch nichts getan, außer der Verknüpfung der id der <i> mit den Variablen x, aber ich bin irgendwie verloren.

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

Ich hoffe, dass es Sinn macht, und Sie die Frage zu bekommen. Ich schätze jede Hilfe, Einblicke, Tipps und Tricks, danke.

Answer 1

können Sie die fa-spin Regel aus font Sheet ehrfürchtigen greifen und einen :hover Selektor hinzuzufügen:

.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

Antwort Chris G besser ist. Hier ist eine andere Antwort in dem gleichen Sinne wie Sie es versucht haben. Ein noch besserer Ansatz wäre es, in jQuery zu schauen und stattdessen unauffällige Event-Handler zu verwenden.

Sie können mein HTML ignorieren, es ist nur dort, so dass das Javascript-Beispiel funktioniert.

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

dies nur zu tun, hinzufügen und die Klasse in der javaScript entfernen und eine Onmouseout Funktion zu Ihrem Elemente hinzufügen. Ihr html wird dies sein (No no fa-spin class).

<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> 

Und Ihr 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"); 
}