Question

I am making a bookmarklet that will upload a image from the page the user is on when it is clicked, all is going well so far but i have hit a bump.

what i want to happen is,

1. User clicks bookmarklet
2. User hovers over an image on the page.
3. a div appears on hover
4. when div is clicked it is taken to my website.

But the div that appears messes with the .hover, it stutters back and forth. I am guessing this is because technically the user isn’t hovering over the image anymore rather the div i have created.

Here is a example.
http://jsfiddle.net/P4b8H/

How could i fix this?

Answer 1

The issue here is that you’re always leaving the image, i.e. hovering out, when your div is created. But then in the hover-out function you’re hiding the div, so you’re kinda stuck in an infinite loop.

To solve, consider having a mouseover on the image and a mouseout on the div.

$("img").mouseover(function(){});

$('#WRAPPER').mouseleave(function() {});

I modified your fiddle. http://jsfiddle.net/P4b8H/5/