Question

我想在我网站上的所有导航菜单链接中执行此操作。（我知道，这听起来很疯狂，但我想我会尝试一下，看看它看起来很酷）我已经有一个网站使用css和onhover来改变鼠标悬停时导航菜单中链接的颜色超过它。但我想让字体也快速更改字体，直到mouseout事件。所以，这是我在head部分中的脚本部分。

<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);
});

on jsfiddle

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

2 个答案: