title: how to make fake cursor in javascript
body: <pre><code>&lt;html&gt;
  &lt;head&gt;
          &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
  #fake /* fake cursor */
  {
    float:left;
    position:absolute;
    z-index:99;
  }
  
  
  
  &lt;/style&gt;
  &lt;script type='text/javascript'&gt;
  $('#div1').ready(function() {
  
    $('#div1').bind('mousemove', function(e){
    $('#fake').css({
       left:  e.pageX + 200,
       top:   e.pageY
    });
    });
  
  
  });
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body style="cursor:text;"&gt;
  
  
  &lt;div id="div1" style="height:300px;width:300px;border:1px solid red;"&gt;&lt;/div&gt;
  
  
    &lt;div id="fake" &gt;&lt;img id="cursor" src="xp.png" /&gt;&lt;/div&gt;&lt;br /&gt;
  
  &lt;body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>i want to hide the fake cursor when mouse cursor is out of div1.how can i do this.i tried using this code below but it dint work.please help.and any suggestions over shouldersurfing are most welcomed.</p>
  
  <pre><code>$("#div1").mouseout(function () {
  $("#fake").hide();
  });
  </code></pre>