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; 
} 

のjavascript：

$(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イベントとmouseenterイベントは、私がcontent-bg div内でマウスを動かすたびにトリガーされるようです。

どうすればこの問題を解決できますか？

おかげ

Answer 1

コメントで指摘されているとして、それが表示されたとして、あなたのマウスが突然、#mouseを置いたときに、あなたのmouseoutが発生します。

手動でこれらのイベントをキャンセルする必要があります：あなたのマウスのdiv 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; 
});