01. 마우스 이펙트 : 따라다니기 / getAttribute / mouseover / mouseout

        //출력용
        window.addEventListener("mousemove", (event) =>{
            document.querySelector(".clientX").innerText = event.clientX;
            document.querySelector(".clientY").innerText = event.clientY;
            document.querySelector(".offsetX").innerText = event.offsetX;
            document.querySelector(".offsetY").innerText = event.offsetY;
            document.querySelector(".pageX").innerText = event.pageX;
            document.querySelector(".pageY").innerText = event.pageY;
            document.querySelector(".screenX").innerText = event.screenX;
            document.querySelector(".screenY").innerText = event.screenY;
        })

        //마우스 움직이기
        window.addEventListener("mousemove", (e) =>{
            // document.querySelector(".cursor").style.left = e.clientX - 25 + "px";
            // document.querySelector(".cursor").style.top = e.clientY - 25 + "px";

            let x =  e.clientX - 25 + "px";
            let y =  e.clientY - 25 + "px";
            document.querySelector(".cursor").style.cssText = "left:" + x + "; top:" + y;
        }) 


        
        // document.querySelector(".style1").addEventListener("mouseover",() =>{
        //     document.querySelector(".cursor").classList.add("style1");
        // })
        // document.querySelector(".style1").addEventListener("mouseout",() =>{
        //     document.querySelector(".cursor").classList.remove("style1");
        // })

        // document.querySelector(".style2").addEventListener("mouseover",() =>{
        //     document.querySelector(".cursor").classList.add("style2");
        // })
        // document.querySelector(".style2").addEventListener("mouseout",() =>{
        //     document.querySelector(".cursor").classList.remove("style2");
        // })

        // document.querySelector(".style3").addEventListener("mouseover",() =>{
        //     document.querySelector(".cursor").classList.add("style3");
        // })
        // document.querySelector(".style3").addEventListener("mouseout",() =>{
        //     document.querySelector(".cursor").classList.remove("style3");
        // })

        // document.querySelector(".style4").addEventListener("mouseover",() =>{
        //     document.querySelector(".cursor").classList.add("style4");
        // })
        // document.querySelector(".style4").addEventListener("mouseout",() =>{
        //     document.querySelector(".cursor").classList.remove("style4");
        // })

        // document.querySelector(".style5").addEventListener("mouseover",() =>{
        //     document.querySelector(".cursor").classList.add("style5");
        // })
        // document.querySelector(".style5").addEventListener("mouseout",() =>{
        //     document.querySelector(".cursor").classList.remove("style5");
        // })

        // document.querySelector(".style6").addEventListener("mouseover",() =>{
        //     document.querySelector(".cursor").classList.add("style6");
        // })
        // document.querySelector(".style6").addEventListener("mouseout",() =>{
        //     document.querySelector(".cursor").classList.remove("style6");
        // })

        // const cursor = document.querySelectorAll(".mouse__wrap p span");
        
        // //for()
        // for (let i = 0; i < cursor.length; i++) {
        //     document.querySelector(".style6").addEventListener("mouseover",() =>{  
        //         document.querySelector(".cursor").classList.add(`style${i+1}`);
        //     });
        //     cursor[i].addEventListener("mouseout", () => {
        //         document.querySelector(".cursor").classList.remove(`style${i+1}`);
        //     });
        // }
        
        for (let i = 1; i <=6; i++) {
                document.querySelector(".style"+i).addEventListener("mouseover",() =>{
                document.querySelector(".cursor").classList.add("style"+i);
            })
            document.querySelector(".style"+i).addEventListener("mouseout",() =>{
                document.querySelector(".cursor").classList.remove("style"+i);
            })
        }

        // //forEach()
        // document.querySelectorAll(".mouse__wrap p span").forEach((span, index) =>{
        //         span.addEventListener("mouseover",() =>{
        //         document.querySelector(".cursor").classList.add("style"+(index+1));
        //     })
        //     span.addEventListener("mouseout",() =>{
        //         document.querySelector(".cursor").classList.remove("style"+(index+1));
        //     })
        // })

        //getAttribute
        //span 마우스 오버 했을 때 속성값을 alert()
        document.querySelectorAll(".mouse__wrap p span").forEach((span) =>{
               let style = span.getAttribute("class");

               span.addEventListener("mouseover", () => {
                document.querySelector(".cursor").classList.add(attr);
               })
               span.addEventListener("mouseout",() =>{
                document.querySelector(".cursor").classList.remove(attr);
            })
        })

마우스 이펙트01 사이트