CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
user1027620
user1027620

Reputation: 2785

jquery two divs using 'hover' event

$('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.

Upvotes: 0

Views: 952

Answers (2)

Christian
Christian

Reputation: 19740

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 });
    }
});

Upvotes: 1

Andrew Samuelsen
Andrew Samuelsen

Reputation: 5432

You could break it up to use .mouseenter() and.mouseleave(). Use .mouseenter() on img.clientImage and then only remove it on $('div#ClientImageHover').mouseleave();

http://jsfiddle.net/gkkxG/

Upvotes: 0

Related Questions