How to use hover property simultaneously with jQuery's mousemove?
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
开发者_JAVA百科Thanks for the help!
Andrew
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();
});
Just simpler:
$("div.containerDIV").hover(function(e){
$("img.sun")[e.type === 'mouseenter' ? 'show' : 'hide']();
});
精彩评论