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以某种方式使onmouseover - 类触发，对吗？

这是我的javascript代码，除了将id的{{1}}与变量<i>相关联之外，我知道我还没有做任何事情，但是我有点失落。

我希望这是有道理的，你就会得到这个问题。我感谢任何帮助，见解，提示和技巧，谢谢。

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>

Answer 2

Chris G的回答更好。这是你试图做的另一个答案。更好的方法是查看jquery并使用不显眼的事件处理程序。

你可以忽略我的HTML，它就在那里，所以javascript示例有效。

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

要执行此操作，只需在javaScript中添加和删除该类，并向元素添加onmouseout函数。你的html就是这个（注意没有fa-spin类）。

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

和你的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");
}

使用外部javascript文件触发HTML类

3 个答案: