使用外部JavaScript文件触发HTML类

Question

I'm using these icons on my webpage: http://fontawesome.io/examples/
One preset class they use for their icons is fa-spin , and it will make the icon spin (du-uh).
I want to make the icons spin whenever they're hovered. A snippet of my HTML(The class "fa fa-envelope" triggers the icon itself):

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

Gotta make the fa-spin -class trigger somehow by the function onmouseover , right?

Here's my javascript code, I know that I haven't done anything yet, other than linking the id of the <i> with the variable x , but I'm kinda lost.

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

I hope it makes sense, and you get the question. I appreciate any help, insight, tips and tricks, thanks.

Answer 1

You can grab the fa-spin rule from font awesome's stylesheet and add a :hover selector:

 .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

Chris G's answer is better. Here is another answer along the same grain of what you were trying to do. An even better approach would be to look into jquery and use unobtrusive event handlers instead.

You can ignore my HTML, it's just there so the javascript example works.

 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

To do this just add and remove the class in the javaScript and add a onmouseout function to your element. Your html will be this (Notice 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>

And your 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");
}