Question

I have an image gallery.

There is a list of thumbs. When you hover over an image, a red x appears that allows you to delete that image.

My problem is, the x blinks when you hover on it. I am assuming that it sees as when the x div appears, it thinks it is a mouseout event so hides it.

Is there a better way to do this?

http://jsfiddle.net/guyfromfl/7ZNGY/1/

The x lines up correctly on my layout, not in jsfiddle, but its not that big of a deal to try to fix…

Answer 1

Without modifying your HTML structure, you need to use mouseenter mouseleave events like so:

http://jsfiddle.net/7ZNGY/3/

mouseout considers only the target of your binding element, so if you hover something inside the container it will count as a “mouseout”, while mouseleave understands that only leaving the container is counted as a “mouseout”

So when you hovered over the X button, it counted as a “mouseout” which hides the element, and you are now in the plain container which triggers mouseover, and this loop causes the strobo effect

edit code:

$(document).delegate('.preview_image', 'mouseenter mouseleave', function (event) {
    var eId = $(this).find("img").get(1).id;
    var id = eId.replace("preview_", "");
    if (event.type == 'mouseenter') {
        $('#delete_img_' + id).fadeIn(100);
    } else {
        $('#delete_img_' + id).fadeOut(100);
    }
});
$(document).delegate('.delete_container', 'click', function () {
    alert("You dirty rat");
});