저기 사이트를 들어가보셨으면 아시겠지만 정확히는 마우스를 따라다니는걸 원하는게아닙니다. 버튼을 하나생성하고 그 버튼에 마우스를 올렸을때 설명창이 뜨게하는거고 그 버튼내에서 어디든지이동해도 마우스를 따라다니게 만들고싶은겁니다

그리고... 그 버튼을 클릭했을때 2번경우처럼 되게만들려고 하고있습니다

그럼 위의 스크립트에서 $(window) 부분을 해당하는 버튼(설명창이 따라다녀야 하는 버튼)의 클래스로 변경해주시면 될 것 같습니다. 또, 해당 버튼에 hover 이벤트를 넣어서 설명창 부분이 보이게/안보이게 설정해주시면 될 것 같네요.

오.. 한번 해보겠습니다 그방법은 될거같은 느낌이 쌔게 드네요

처음에 위에거 안되길래 왜안되나 해보니 position:"fixed" 가 빠져서 안따라오는거였습니다. 넣어서 따라오게만들었고.

<style>
.cursor{
display: none ;
}

를 줘서 숨기는거 까지 완료했습니다.

<script>
$("#1_1").on("mousemove", (e) => {
$(".cursor").css({
top: e.pageY + "px",
left: e.pageX + "px",
position:"fixed"
});
});
</script>

버튼 id값으로 변경까지 완료했습니다

<button id="1_1" onmouseover="javascript:$('.cursor').show();">　

이렇게하니까 버튼위에서 커서따라다니게 하는건성공했는데.

onmouseout="javascript:$('.cursor').hide();"

를넣는순간 뜨는건지 안뜨는건지 깜빡거리는건지 몇번정도 보일때가 잇는거같고약간 깜빡거린다는 표현이 맞으려나요 거의 안보이지만 간간히 나올때가 있게 됩니다

혹시 소스 지적해줄만한게 있을까요 ? onmouseout="javascript:$('.cursor').hide();" 이게 문제될만한 소스인지 이거만넣으면 기능이 고장나버리네요

onmouseout="javascript:$('.cursor').hide();"를 빼자니 네모박스가 계속떠있어서 hide() 시키긴해야할거같습니다. 버튼을 한 40개정도 만들거같은데 계속떠있으면 그거대로 문제거든요

전 비슷한 내용 구현할 때 position:absolute로 작성했던 기억이 나네요. 이벤트가 아니라 CSS에서 선언해줘도 됩니다.

        $("#1_1, #1_2, #1_3, #1_4").on({
            mousemove: (e) => {
                $(".cursor").css({
                    top: e.pageY + "px",
                    left: e.pageX + "px",
                })
            },
            mouseover: (e) => {
                $(".cursor").show();
            },
            mouseout: (e) => {
                $(".cursor").hide();
            }
        });

스크립트는 인라인으로 작성하기보다는 분리하는 쪽을 권장하는 편입니다. 위와 같이 작성해서 테스트해본 결과 깜빡임은 보이지 않네요. 구조나 마크업의 문제일 가능성이 있으니 영역을 다시 확인해보시면 어떨까 싶습니다.

주신소스를 넣어서 해보았습니다 그래도 계속 깜빡거립니다.

관리자 모드로 cursor를 확인해보았는데

북서쪽으로 갈떄는 display가 block인데 동남쪽으로 마우스를 이동시 display가 none으로 됩니다.

처음에

<style>
.cursor{
display: none ;
}
이렇게 준게 문젠가 싶어서
<style>
.cursor{
border: 1px solid #ddd
}
</style>

로 바꾸고 해보았습니다

이렇게하게될경우 사이트 로드시에 설명창이 div자리에 보여지는 상태로 있다가 button에 마우스를 가야지 설명창이 생기긴하는데 동남쪽으로 갈때마다 display가 none인건 여전합니다 계속 깜빡임 현상이있는데


element.style {
    top: 369px;
    left: 658px;
    position: absolute;
    display: none;
}

.cursor {
    border: 1px solid #ddd;
}

css 상에는 전혀 문제가없어보입니다

마우스 가만히 두면 계속 깜빡이고있는데

<button id="1_1">　　　　　　　　　　　　　　　<br><br><br><br><br><br><br><br><br><br></button>
<div class="cursor">설명을 어쩌구 저쩌구 적는다<br> 이렇게 적다보면 뭔가있어보인다 <br> 확실한가 맞는거같다<br> 근데 왜 박스 나갔는데 설명창이 안사라지니? 버그화난다</div>

코드에도 이상이 없어보입니다

.cursor css에 pointer-events : none; 넣어보시겠어요?

.cursor css에 pointer-events : none; 와 관계없이

                    top: e.pageY+20 + "px",
                    left: e.pageX+20 + "px",

를줘서 해결했습니다

원인이 마우스 동남쪽으로 갈때마다 문제가생기길래 x값과 y값을 한번 떨어트려보니 문제가안되었습니다 마우스가 빨라서 버튼에서 설명창으로 마우스가 올라가면서
  mouseout: (e) => {
                $(".cursor").hide();
            }
이 발생한거 같습니다.
소스끼리 충돌난거같은 그런느낌이네요 설명창만 띄워두니까 문제될거없어서 약간 띄워둘 생각입니다 감사합니다. 덕분에 해결봤습니다 그리고 좋은 소스 많이 배웠습니다

이제 이 버튼 눌러서 버튼 이미지나 css가 바뀌고 주소창 파라미터값이 0에서 1로 바뀌는것을 연구해보겠습니다 채택드릴게용