我在网页上使用这些图标: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
使onmouseover
类触发,对吗?这是我的JavaScript代码,我知道除了将
id
的<i>
与变量x
链接之外,我还没有做任何其他事情,但是我有点迷失了。function dothis()
{
var x = document.getElementById ("wantspin")
}
我希望这是有道理的,然后您就可以了。感谢您的帮助,见解,技巧和窍门。
最佳答案
您可以从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>