WebPublisher/JavaScript & jQuery

[javaScript] 자바스크립트로 mouse hover event 구현

amanda 2023. 11. 30. 10:22

자바스크립트로 mouse over (mouse enter) 호버 이벤트 구현하기

 

const wrap = document.getElementById('js_menu_wrap');
const items = wrap.children;

for(let i=0; i<items.length; i++){
    items[i].addEventListener('mouseover',showTitle);
}

for(let i=0; i<items.length; i++){
    items[i].addEventListener('mouseout',removeTitle);
}

// mouse over 시 event
function showTitle(event) {
    console.log('work');
    event.target.classList.add('on');
}

// mouse out 시 event
function removeTitle(event){
    event.target.classList.remove('on');
}