javascript - 使用外部 javascript 文件触发 HTML 类

Question

我在网页上使用这些图标:http://fontawesome.io/examples/
他们用于图标的一个预设类别是 fa-spin ，它会让图标旋转(du-uh)。
我想让图标在悬停时旋转。我的 HTML 片段(类 "fa fa-envelope" 触发图标本身):

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

必须做fa-spin -class 通过函数 onmouseover 以某种方式触发，对吗？

这是我的 javascript 代码，我知道除了链接 id 之外我还没有做任何事情。 <i>的变量 x ，但我有点迷失了。

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

我希望这是有道理的，并且你明白了这个问题。我感谢任何帮助、见解、提示和技巧，谢谢。

Answer 1

您可以从 font Awesome 的样式表中获取 fa-spin 规则并添加 :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>