onmouseover 및 setInterval을 사용하여 빠르게 글꼴 그룹을 변경하십시오.

Question

내 사이트의 모든 탐색 메뉴 링크에서이 작업을 수행하려고합니다. (나는 미친 소리가 난다.하지만 멋지게 보일지는 알았다.) 마우스가 움직일 때 탐색 메뉴의 링크 색을 변경하기 위해 이미 CSS와 전환 기능을 사용하는 사이트가있다. 그걸로. 그러나 나는 font가 또한 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> 

여기 테스트 링크가 있습니다.

내가 거기에 그 물건을 넣었음에도 불구하고, 페이지는 JavaScript를 넣기 전에했던 것과 똑같습니다. JavaScript가 전혀 작동하지 않습니다. 왜 작동하지 않습니까?

Answer 1

이 당신이 뭘 하려는지인가 : http://jsfiddle.net/ffHqe/

당신이 당신의 changeText 기능에 오류가 발생한 것 같다?

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

Answer 2

[업데이트] 라이브 데모 :

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