title: Javascript: Child should not be inheriting mouse state from Parent
body: <p>I'm trying to create a small image that follows the mouse around but only exists inside a specific area. I'm using javascript/jquery to create the image when the mouse enters the area and remove it when the mouse leaves.</p>
  
  <p>The problem is, if I create the "follower" inside the area div, the image seems to be considered part of it's parent for determining mouse state, and thus it continues to exist even after the mouse is outside the area.
  (If I move the mouse fast enough the cursor will escape and the follower disapears.)</p>
  
  <p>Here is the code I'm using:</p>
  
  <pre><code>$("#area").mouseenter(function() {
      $("#area").append("&lt;img id='follower' src='follower.png'/&gt;");
  });
  
  $("#area").mousemove(function(event){
      $("#follower").css("top",event.pageY-35);
      $("#follower").css("left",event.pageX-35);
  });
  
  $("#area").mouseleave(function() {
      $("#follower").remove();
  });
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/cgWdF/186/" rel="nofollow">http://jsfiddle.net/cgWdF/186/</a></p>
  
  <p>I have also attempted creating the "follower" inside a separate div, which works but results in a weird flickering of the image, as seen here: <a href="http://jsfiddle.net/cgWdF/187/" rel="nofollow">http://jsfiddle.net/cgWdF/187/</a></p>
  
  <p>Any help, with this, would be appreciated. It doesn't matter whether the follower is created inside the area div, or not, as long as the flickering affect isn't seen. Also, I'd like to keep the code as compact as possible, but I'll take what I can get.</p>