티스토리 뷰
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');
}
'WebPublisher > JavaScript & jQuery' 카테고리의 다른 글
[jQuery] filter 활용한 on click 이벤트 tab menu (0) | 2023.12.06 |
---|---|
[jQuery] 탭 메뉴 클릭 시 scroll event (0) | 2023.11.30 |
[javaScript] 카카오톡 공유하기 버튼 & 오류 해결 (1) | 2023.11.28 |
[javaScript] 특정 날짜 기간 동안에만 이벤트 실행 (0) | 2023.11.17 |
[youtube] 유튜브 영역에 intro image 넣고 클릭 시 동영상 자동 재생 (0) | 2023.11.10 |
공지사항