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.
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.)
Here is the code I'm using:
$("#area").mouseenter(function() {
$("#area").append("<img id='follower' src='follower.png'/>");
});
$("#area").mousemove(function(event){
$("#follower").css("top",event.pageY-35);
$("#follower").css("left",event.pageX-35);
});
$("#area").mouseleave(function() {
$("#follower").remove();
});
JSFiddle: http://jsfiddle.net/cgWdF/186/
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: http://jsfiddle.net/cgWdF/187/
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.
This occurs because the element on which you mouseleave is not the one on which you think it happens. In fact, your sprite is triggering the event instead because your pointer is over it at that time.
To prevent that from happening, you can force the page to cancel all pointer events on your sprite. By doing that, #area will trigger your pointer events as intended. The css rule pointer-events might be helpful for this.
CSS
#follower {
position: absolute;
height: 80px;
pointer-events: none;
}
There are probably better ways to deal with that but it's the most simple I can come up with for now.
Hope this helps!
See FIDDLE.