How to use hover property simultaneously with jQuery's mousemove?

Question

I have coded a simple div containing an image that follows the mouse cursor only when the mouse is present within the div using jQuery's mousemove property. It works great, except for I would like the image to be hidden by default, and to only appear when the mouse is present (and then when the mouse leaves, to disappear again.) This could normally be handled with the hover property, but it does not work when placed with the mousemove property. Any ideas? Here is the basic code that I am using at the moment:

$('.containerDIV').mousemove(function(e) {$('.image').css({'left' : e.pageX+'px',});});

Here is a demo page: http://www.fluidweb.ca/movingImage

Thanks for the help!

Andrew

Answer 1

It would probably be best to bind a jQuery.mousenter and jQuery.mouseleave event to the div itself.

$("div.containerDIV").mouseenter(function(){
  $("img.sun").show();
}).mouseleave(function(){
  $("img.sun").hide();
});