Question

I have an image with a play/pause button positioned absolute and centered over top.

see example;
http://jsfiddle.net/GuJWk/3/

The button appears when the user hovers over the img, and disappears when the mouse leaves the image.

The problem i’m having is a flicker when the user hovers over the button,
i suspect its because the images mouse out event has been triggered.

I know what the problem is and whats causing it, but i can’t fix it.
I don’t want to nest the pauseplay button, to get it working either.
I just need to manage the bubbling events some how..

Thanks,
Cam

Answer 1

Does this solve your problem?

http://jsfiddle.net/eHerL/

$("body").on("mouseover", "img", function(){
    $('#pauseplay').stop(true,true).fadeIn(1000);
}).mouseleave(function(){
    $('#pauseplay').stop(true,true).fadeOut(1000);
});​