触发HTML级与外部JavaScript文件

我用在我的网页这些图标：http://fontawesome.io/examples/
他们用他们的图标一个预设类是fa-spin，它会使图标旋转（DU-呃）。
我想让图标旋转，只要他们徘徊。 我的HTML片段（类"fa fa-envelope"触发图标本身）：触发HTML级与外部JavaScript文件

<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代码，我知道我没有做任何事情，不是链接的<i>与变量x的id其他，但我有点迷失。

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

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

来源

2017-10-05 Sykt Norsk

我已不使用JavaScript的答案，但只是供参考：下一步将是添加的'FA-spin'类：'x.classList.add（“FA-旋转“）;' –

你可以抓住从字体真棒的样式表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>

来源

2017-10-05 22:30:26

这里是一个香草JS解决方案：https://jsfiddle.net/khrismuc/oa1rzz7y/ –

从真棒样式表中拉出规则的方法是什么？ 'CTRL + F' fa-spin？ –

@SyktNorsk是:) –

克里斯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>

来源

2017-10-05 22:37:20 axlj

要做到这一点只需添加和删除在JavaScript中的类，并添加一个功能，鼠标移开你的元素。你的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"); 
}

来源

2017-10-05 22:38:02

没问题我编辑我的答案，因为我忘了把鼠标事件：-S –

触发HTML级与外部JavaScript文件

回答

相关问题