觸發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文件

回答

相關問題