Question

$('img.clientImage').live('hover', function () {
    if ($('div#ClientImageHover').length > 0) {
        $('div#ClientImageHover').remove();
    } else {
        $('<div id="ClientImageHover">Change Image</div>').insertAfter($(this));
        $('div#ClientImageHover').css({ 'top': $(this).position().top });
    }
})

Now what happens if I hover over #ClientImageHover. You guessed it, it will start flickering quickly on and off. Because there’s a mouseout event on .clientImage.
I need to create the element here and append it after the img then position it on top of it. This is working correctly, but I am having issues when hovering over #ClientImageHover. How can I keep showing this div normally when the mouse is over it and keep everything as it currently is?

Thanks.

Answer 1

To expand on my comment, do something like this jsFiddle

HTML:

<div class="container">
    <img class="clientImage"></div>
</div>

JS

$('.container').live('hover', function () {
    if ($('div#ClientImageHover').length > 0) {
        $('div#ClientImageHover').remove();
    } else {
        $('<div id="ClientImageHover">Change Image</div>').appendTo($(this));
        $('div#ClientImageHover').css({ 'top': $(this).position().top });
    }
});