jQurey Menu Effect 01 - jQurey

<main>
    <div class="cursor"></div>
    <article class="mouseCont">
        <p><span class="style1">It is better</span> to fail in <span class="style2">originality</span> than to <span
                class="style3">succeed in</span>imitation.</p>
        <h2><span class="style1">창의적으로</span> 실패하는 것이 <span class="style2">모방해서</span>성공하는 것
        <span class="style3">보다 낫다.</span></h2>
    </article>
</main>

.mouseCont {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: #fff;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: 'NEXONLv1Gothic';
    cursor: none;
}

.mouseCont p {
    font-size: 2.5vw;
    line-height: 2.3;
    font-weight: 300;
}

.mouseCont h2 {
    font-size: 3vw;
    font-weight: normal;
    font-weight: 400;
}

.mouseCont span {
    font-style: normal;
    border-bottom: 0.2vw dashed #fff;
}

.cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.1);
    user-select: none;
    pointer-events: none;
    transition:
        background-color .2s,
        border-radius .2s,
        border-color .2s,
        transform .6s;
}

.cursor.style1 {
    background-color: rgba(255, 165, 0, 0.4);
    border-color: orange;
}

.cursor.style2 {
    background-color: rgba(208, 158, 248, 0.178);
    border-color: rgb(140, 0, 255);
    transform: rotateY(720deg) scale(2);
}

.cursor.style3 {
    border-color: #fff;
    border-radius: 10px;
    width: 100px;
    height: 100px;
    background-image: url(../assets/img/너굴.JPG);
    background-size: cover;
    background-position: center;
}

.cursor.style4 {
    border: none;
    background: none;
    width: 100px;
    height: 100px;
    background-image: url(../assets/img/HI.png);
    background-size: cover;
    background-position: center;
}

.cursor.style5 {
    border-radius: 50px;
    background-color: rgba(255, 115, 0, 0.178);
    border-color: #8B4513;
    transform: scale(5);
}

.cursor.style6 {
    background-color: rgba(218, 112, 214, 0.014);
    border-color: rgba(250, 36, 243, 0.795);
    transform: rotateX(720deg) scale(2);
}



/* 
.cursor.active {
    background-color: rgba(255, 128, 0, 0.226);
    border-color: #f09144;
} 

.cursor.active2 {
    background-color: rgba(0, 66, 189, 0.226);
    border-color: rgb(0, 66, 189);
    border-radius: 50px;
} 

.cursor.active3 {
    background-color: rgba(189, 69, 0, 0.226);
    border-color: rgb(158, 55, 7);
    border-radius: 50px;
    width: 100px;
    height: 100px;
    background-image: url(../assets/img/imges1.jpg);
    background-size: cover;
    background-position: center;
}  */

// 출력용
$(window).mousemove(function (e) {
    $(".clientX").text(e.clientX + "px"); //브라우저 X좌표 기준
    $(".clientY").text(e.clientY + "px"); //브라우저 Y좌표 기준
    $(".offsetX").text(e.offsetX + "px"); //요소 X좌표 기준
    $(".offsetY").text(e.offsetY + "px"); //요소 Y좌표 기준
    $(".pageX").text(e.pageX + "px"); //페이지 X좌표 기준
    $(".pageY").text(e.pageY + "px"); //페이지 Y좌표 기준
    $(".screenX").text(e.screenX + "px"); //디바이스 X좌표 기준
    $(".screenY").text(e.screenY + "px"); //디바이스 Y좌표 기준
});
//마우스 움직이기
$(window).mousemove(function (e) {
    // $(".cursor").css("left","100px");
    // $(".cursor").css("top","100px");
    // $(".cursor").css({"left":"100px", "top":"100px"});
    // $(".cursor").css({left:"100px", top:"100px"});
    // $(".cursor").css({left:100, "background-color":100});
    // $(".cursor").css({left:100, backgroundColor:100});

    $(".cursor").css({
        left: e.clientX - 25,
        top: e.clientY - 25
    });
});
// $(".mouseCont .style1").hover(function(){
//     $(".cursor").addClass("style1");
// }, function(){
//     $(".cursor").removeClass("style1");
// });
// $(".mouseCont .style2").hover(function(){
//     $(".cursor").addClass("style2");
// }, function(){
//     $(".cursor").removeClass("style2");
// });
// $(".mouseCont .style3").hover(function(){
//     $(".cursor").addClass("style3");
// }, function(){
//     $(".cursor").removeClass("style3");
// });
// $(".mouseCont .style4").hover(function(){
//     $(".cursor").addClass("style4");
// }, function(){
//     $(".cursor").removeClass("style4");
// });
// $(".mouseCont .style5").hover(function(){
//     $(".cursor").addClass("style5");
// }, function(){
//     $(".cursor").removeClass("style5");
// });
// $(".mouseCont .style6").hover(function(){
//     $(".cursor").addClass("style6");
// }, function(){
//     $(".cursor").removeClass("style6");
// });
//for문
// for( let i=1; i<=6; i++ ){
//     $(".mouseCont .style"+i).hover(function(){
//         $(".cursor").addClass("style"+i);
//     }, function(){
//         $(".cursor").removeClass("style"+i);
//     });
// }
//each()
// $(".mouseCont span").each((index, element) => {
//     $(element).hover(function(){
//         $(".cursor").addClass("style"+ (index+1));
//     }, function(){
//         $(".cursor").removeClass("style"+(index+1));
//     });
// });
//attr()
$(".mouseCont span").hover(function () {
    $(".cursor").addClass($(this).attr("class"));
}, function () {
    $(".cursor").removeClass($(this).attr("class"));
});