0

サイトのすべてのナビゲーション メニュー リンクでこれを行いたいと考えています。(私は知っています、それはクレイジーに聞こえますが、試してみて、それがクールに見えるかどうかを確認しようと思いました) 私はすでに css と onhover を使用して、マウスがホバーしたときにナビゲーション メニューのリンクの色を変更するサイトを持っています。その上。しかし、マウスアウトイベントまでフォントも急速にフォントフェイスを変えたいと思っています。これが head セクションにある script セクションです。

<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 がまったく機能していません。うまくいかないのはなぜですか？

4

2 に答える 2

0

[更新] ライブデモ: 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";
}
}
于 2013-04-23T20:02:15.497 に答える
0

これはあなたがやろうとしていることですか？

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で

于 2013-04-23T20:11:56.537 に答える