마우스를 가져 가면 툴팁 및 메뉴 애니메이션이 표시됩니다.

Question

이벤트에 작업을 결합하려면 어떻게합니까? 따라서 마우스를 올리면 메뉴가 애니메이션으로 표시되고 해당 메뉴 항목에 첨부 된 툴팁이 표시됩니다.

나는 lavalamp 및 beautytips 플러그인을 사용하여 currenlty입니다.

Answer 1

이벤트 핸들러와 이벤트 리스너를 탐색해야합니다. 예 :

// Event handlers are declared like this: 

var elm = document.getElementById("someElement"); 

elm.onmouseover = function() { 
    elm.innerHTML = "OVER state has been triggered!"; 
} 

이렇게 작성하면 각 요소는 이벤트에 대해 하나의 기능을 가질 수 있습니다.

이벤트 리스너를 사용하면 원하는만큼 많은 기능을 이벤트에 연결할 수 있습니다. 그들은 IE와 FF에서 다른 스크립트이지만, 똑같은 일을합니다. 원시 자바 스크립트를 사용하면 다음과 같은 이벤트를 첨부 할 수 있습니다.

function listenFor(obj,eventName,fcnRef,bubbling) { 
    if(!bubbling) { bubbling= false; } 
    if(!obj.addEventListener) { obj.attachEvent("on"+eventName,fcnRef); } 
    else { obj.addEventListener(eventName,fcnRef,otherthing); } 
}; 

function handler1() { 
    this.style.border = '2px solid red'; 
} 

function handler2() { 
    this.style.background = 'green'; 
} 

listenFor(elm,"over",handler1); 
listenFor(elm,"over",handler2); 

라이브러리는 JQuery와 비슷한 방법으로이를 수행합니다. 이 주제에 대한 약간의 연구와 실험을 통해 메뉴에 애니메이션을 적용하고 동일한 요소에 툴팁을 동시에 표시 할 수있는 충분한 정보를 제공해야합니다.