使用onmouseover和setInterval快速更改字体系列

Question

我想使用我网站上的所有导航菜单链接来做到这一点。 （我知道，这听起来很疯狂，但是我想尝试一下看一下它是否很酷）我已经有一个站点，当鼠标悬停时，该站点使用css和onhover更改导航菜单中链接的颜色超过它。 但是我要使字体也迅速更改字体，直到发生mouseout事件。 因此，这是我在开头部分中的脚本部分。

<script>
var changeVar;
var font = "Impact";

changeText() {
    if font == "Impact" {
         document.getElementById("tops").style.fontFamily="courier";
         font = "Courier";
    }
    else
         document.getElementById("tops").style.fontFamily="impact";
         font = "Impact";
    }
}
</script>

这是我用来测试的导航链接。

<li><a href="tops.html" id="tops" onmouseover="changeVar=setInterval('changeText()', 10);" onmouseout="clearTimeout(changeVar)">Tops</a></li>

即使我把这些东西放在那里，页面也做着和我将JavaScript放在那里一样的事情。 JavaScript根本不起作用。 为什么不起作用？

Answer 1

[更新]现场演示： http : //jsfiddle.net/ffHqe/

似乎您的changeText函数中有一个错误：

function changeText() {
if font == "Impact" {
     document.getElementById("tops").style.fontFamily="courier";
     font = "Courier";
}
else {
     document.getElementById("tops").style.fontFamily="impact";
     font = "Impact";
}
}

Answer 2

这是您要做什么？

a.navlinkOff {
    font-family: Arial !important;
}
a.navlinkOver1 {
    font-family: Courier !important;
}
a.navlinkOver2 {
    font-family: Impact !important;
}

<a id="navlink1" href="#" class="navlinkOff">Resource 1</a>
<br />
<a id="navlink2" href="#" class="navlinkOff">Resource 2</a>
<br />
<a id="navlink3" href="#" class="navlinkOff">Resource 3</a>
<br />
<a id="navlink4" href="#" class="navlinkOff">Resource 4</a>
<br />
<a id="navlink5" href="#" class="navlinkOff">Resource 5</a>
<br />

var navlinks = document.querySelectorAll("[id^=navlink]");
var delay = 250; // milliseconds
var fired = false;
var id = {};

function defaultClass(evt) {
    evt.target.className = "navlinkOff";
    clearInterval(id[evt.target.id]);
    fired = false;
}

function changeClass(evt) {
    if (evt.target.className === "navlinkOver1") {
        evt.target.className = "navlinkOver2";
    } else {
        evt.target.className = "navlinkOver1";
    }

    if (fired) {
        return;
    }

    fired = true;
    id[evt.target.id] = setInterval(function () {
        changeClass(evt);
    }, delay);
}

Array.prototype.forEach.call(navlinks, function (navlink) {
    navlink.addEventListener("mouseout", defaultClass, false);
    navlink.addEventListener("mouseover", changeClass, false);
});

在jsfiddle上