mouseEffect02 - 따라다니기

JS구성

1. 마우스 오버 했을 때 클래스 active 추가 & 나갔을 때 클래스 active 삭제

document.querySelectorAll(".mouse__wrap p span").forEach(span => {
    span.addEventListener("mouseenter", () => {
        cursor.classList.add("active");
        follower.classList.add("active");
    })
    span.addEventListener("mouseleave", () => {
        cursor.classList.remove("active");
        follower.classList.remove("active");
    })
})

 

2. 내친김에 위에 인포메이션(제목, 목차 등)에도 적용해주자!

document.querySelector(".info").addEventListener("mouseover", (info) => {
    cursor.classList.add("show")
    follower.classList.add("show");

})

document.querySelector(".info").addEventListener("mouseout", (info) => {
    cursor.classList.remove("show");
        follower.classList.remove("show");
})

 

https://sungilryuu.github.io/webs_class/javascript/effect/mouseEffect02.html