Hi all,
jQuery newbie here and this is my first post. I'm stuck on this
conundrum:
I have some images on a page and .hover() is bound to each. The "is
hovering" function displays an absolute-positioned DIV on top of
everything else (it contains a bigger version of the clicked-on
image). The "is not hovering" function removes that DIV.
$('TD IMG').hover(
function () {
$('<DIV></DIV>').addClass('test_lightbox').append( $(this).clone
() ).fadeIn('fast').prependTo('BODY');
},
function () {
$('DIV.test_lightbox').fadeOut('fast').remove();
}
);
This works well, except in the rare case when the pop-up DIV overlaps
the thumbnail IMG that was clicked on (say, the user had their browser
shrunk super small). When that happens, the cursor is no longer
hovering over the thumbnail; it's hovering over the DIV. That causes
the IMG's "is not hovering" function to fire which removes the DIV--
but then the cursor falls upon the IMG again, starting the loop all
over again.
What approach or best practice should I follow to resolve this? I
could probably find a way to ensure that the DIV element never appears
over the IMG element, but there must be a way to handle this with the
JS code directly. Ideas?
Thanks,
Bobby
