使用外部javascript文件触发HTML类

我正在我的网页上使用这些图标：
他们用于图标的一个预设类是

fa spin

，它将使图标旋转（du-uh）
我想让图标在悬停时旋转。 我的HTML的一个片段（类

“fa-fa信封”

触发图标本身）：

---

我希望这是有道理的，你会明白这个问题的。非常感谢您提供的帮助、见解、提示和窍门，谢谢。

您可以从font awesome的样式表中获取

fa spin

规则，并添加

：悬停

选择器：

。旋转：悬停{
-webkit动画：fa spin 2s无限线性；
动画：fa spin 2s无限线性
}

---

您可以从font Aewome的样式表中抓取

fa spin

规则，并添加

：悬停

选择器：

。旋转：悬停{
-webkit动画：fa spin 2s无限线性；
动画：fa spin 2s无限线性
}

---

克里斯·G的答案更好。下面是另一个答案，与您试图做的事情大致相同。一种更好的方法是研究jquery并使用不引人注目的事件处理程序

您可以忽略我的HTML，它就在那里，所以javascript示例可以工作

函数dothis（）{
var el=document.getElementById（'wantspin'）；
如果（el）{
el.classList.add（'fa-spin'）；
}
}
函数dothat（）{
var el=document.getElementById（'wantspin'）；
如果（el）{
el.classList.remove（'fa-spin'）；
}
}

#wantspin{
高度：20px；
宽度：20px；
背景：蓝色；
}
F.旋转{
边框：3倍纯红；
}

---

克里斯·G的答案更好。下面是另一个答案，与您试图做的事情大致相同。一种更好的方法是研究jquery并使用不引人注目的事件处理程序

您可以忽略我的HTML，它就在那里，所以javascript示例可以工作

函数dothis（）{
var el=document.getElementById（'wantspin'）；
如果（el）{
el.classList.add（'fa-spin'）；
}
}
函数dothat（）{
var el=document.getElementById（'wantspin'）；
如果（el）{
el.classList.remove（'fa-spin'）；
}
}

#wantspin{
高度：20px；
宽度：20px；
背景：蓝色；
}
F.旋转{
边框：3倍纯红；
}

---

要做到这一点，只需在javaScript中添加和删除类，并在元素中添加onmouseout函数。您的html将如下所示（请注意，没有fa spin类）

---

要做到这一点，只需在javaScript中添加和删除类，并在元素中添加onmouseout函数。您的html将如下所示（请注意，没有fa spin类）

---

我发布了一个不使用JavaScript的答案，但仅供参考：下一步应该是添加

fa spin

class:

x.classList.add（“fa spin”）

我发布了一个答案，这个答案没有使用JavaScript，只是作为参考：下一步应该是添加

fa spin

class:

x.classList.add（“fa spin”）这里有一个普通的JS解决方案：从awesome的样式表中提取规则的方法是什么
CTRL+F
fa-spin？@SyktNorsk-Yes:）工作得很好，但使用javascript还不是很舒服。同样感谢其他的过程：）这里有一个普通的JS解决方案：从Aweome的样式表中提取规则的方法是什么
CTRL+F
fa-spin？@SyktNorsk-Yes:）工作得很好，但使用javascript还不是很舒服。同样感谢其他过程：）没问题，我编辑了我的答案，因为我忘了放置mouseout事件：-SNo问题，我编辑了我的答案，因为我忘了放置mouseout事件：-S
<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>

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

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

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