Question

http://wilwaldon.com/gift/index.html is the page is question.

Here’s the pastebin of the html/jquery: http://pastebin.com/L4HQBjBc

Pastebin of jQuery: http://pastebin.com/WmEUK7Ey

If you hover the icons above the large “activate now” button on the right side (satelite dish, briefcase,lock) a div will appear.

The desired action is that the div appears on hover and disapears on hover-out.

What’s happening is that if you hover over the text of the pop-up the div disappears.

Thanks in advance!

Answer 1

Instead of using the 2nd part of .hover() which is the same as .mouseout() leave it out, and change your 2nd function to .mouseleave(). The 2nd part of the hover will get called as soon as the mouse moves out od calloutpop, which it will be doing when the mouse goes over the text as thats in its own div. Using .mouseleave() will be called when the mouse leaves the div, not when it hovers over an element within it.

Also, you should wait for the dom to be ready before doing any jQuery functions, at the moment you are only waiting to .hide() the popup:

jQuery(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    jQuery('#calloutpop').hide();
    jQuery('#callout').hover(function() {
        jQuery('#calloutpop').fadeIn(500);
    });
    jQuery('#calloutpop').mouseleave(function(event) {
            jQuery(this).fadeOut(500);
    });
});

See it working here