title: jquery - mousemove: how to prevent div to stop follow the mouse
body: <p>I have 2 div’s. One big yellow box and one small red box. I use jQuery to append the mousemove effect on the yellow box. When the mouse is over the yellow box, the mouseover causes the red box to follow the mouse. When then mouse reaches the red box “in” the yellow box, is no longer  on mousemove on the yellow box and the red box stops follow the mouse. When the mouse enter the yellow box again it move with the mouse again – of course. The red box have to follow the mouse as long it is over the yellow box and not stop because it move over the red box itself. Is there a way to prevent that?</p>
  
  <p>Thanks</p>
  
  <p>Code here: <a href="http://jsfiddle.net/Illum/pPn3v/" rel="nofollow">http://jsfiddle.net/Illum/pPn3v/</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  #box1 {width: 500px; height: 500px; background-color: Yellow; border: 2px solid Blue;}
  #box2 {width: 100px; height: 100px; background-color: red; border: 2px solid pink; z-index: 100; position: absolute;}    
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="box1"&gt;&lt;/div&gt;
  &lt;div id="box2"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $("#box1").bind('mousemove', function (e) {
          $("#box2").css("left", e.pageX);
          $("#box2").css("top", e.pageY);
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>