mouseeffect01 - 따라다니기

const Cursor = document.querySelector(".cursor");
const mouseWrap = document.querySelectorAll(".mouse__wrap span")
// console.log(mouseWrap)

//출력용
window.addEventListener("mousemove", () => {
    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;
});

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

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

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

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

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

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

//for
// for(let i = 0; i<mouseWrap.length; i++){
//     mouseWrap[i].addEventListener("mouseover", ()=>{
//     document.querySelector(".cursor").classList.add("style" + (i+1));
// });
// mouseWrap[i].addEventListener("mouseout", ()=>{
//     document.querySelector(".cursor").classList.remove("style" + (i+1));
// })
// }

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

//getAttribute
//span 마우스 오버 했을 때 속성값을 alert()
mouseWrap.forEach(e => {
    // e.addEventListener("mouseover", ()=>{
    //      document.querySelector(".cursor").getAttribute(alert("ddd"))
    // });
    let attr = e.getAttribute("class")

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