我在网页上使用这些图标: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>

10-05 20:40
查看更多