Jquery replace mouse cursor

Question

마우스 커서를 이미지로 바꾸려고합니다.

나는 다음과 같은 HTML을 가지고 :

<div id="content-bg"> 
    <img src="path"/> 
</div> 
<div id="mouse"></div> 

CSS :

#content-bg{ 
    background:url(../img/frontend/content-bg.png) top left no-repeat; 
    width: 968px; 
    height: 552px; 
    position:relative; 
} 

#mouse { 
    cursor: none; 
    width: 75px; 
    height: 76px; 
    background: url("../img/frontend/cross.png") no-repeat center; 
    position: absolute; 
    display:none; 
    top: 0; 
    left: 0; 
    z-index: 10000; 
} 

자바 스크립트 :

$(document).ready(function(){ 
    $('#content-bg').mouseout(function(){ 
      $('#mouse').hide(); 
      $(this).css("cursor","none"); 
      return false; 
    }); 
    $('#content-bg').mouseenter(function(){ 
      $('#mouse').show(); 
      return false; 
    }); 
    $('#content-bg').mousemove(function(e){ 
      var x = e.clientX - $(document).scrollLeft() - 37.5; 
      var y = e.clientY + $(document).scrollTop() - 38; 
      $('#mouse').css('left', x).css('top',y); 
    }); 
}); 

마우스 이미지가 올바른 위치에 있지만 것을 깜박하고 화려한 . 전환은 내가 원하는만큼 부드럽 지 않습니다. 어떻게 든 그것은 mouse-mouse 및 event-event가 content-bg div 안에 마우스를 움직일 때마다 트리거되는 것 같습니다.

어떻게하면 해결할 수 있습니까?

감사 의견에서 지적 된 바와 같이

Answer 1

,이 나타나는 마우스가 갑자기 #mouse 놓을 때 mouseout가 발생합니다.

당신은 수동으로 이벤트를 취소해야합니다

마우스 사업부는`내용 bg`을 숨기고 becaue의

$('#content-bg').mouseout(function(e){ 
     if($(e.relatedTarget).is('#mouse')) { return false; } 
     $('#mouse').hide(); 
     $(this).css("cursor","none"); 
     return false; 
}); 

$('#content-bg').mouseenter(function(e){ 
     if($(e.fromElement).is('#mouse')) { return false; } 
     $('#mouse').show(); 
     return false; 
});