jquery show/hide on hover. Hiding when contents hovered

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

Here's the pastebin of the html/jquery: http://pastebin.c开发者_StackOverflowom/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!

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

You are registering a hover listener to the whole div. The first time you hover over it it opens. Then if the user goes over one of the included icons a hover-event is fired on the included icon. In Javascript events bubble-up the DOM ( keyword: event propagation). So the hover event will be propagated to the parent div on which you have registered the hover listener. This will cause the div to hide.

You can register hover listeners on the icons that just call event.stopPropagation() to stop the propagation like this:

$('.icons_in_hover').hover(function(e){
  e.stopPropagation();
});

Maybe if you don't have the handler out function do anything or only use .mouseenter() your problem will be resolved. I think what is happening is that since your div that appears is covering up the triggering element, then the mouseout is fired as soon as the mouse hits something that isn't the trigger (the text of the popped up div)

The mouse out you already have in place for the popup should take care of the hiding otherwise.

Try this

jQuery('#callout').mouseenter(function() {
   jQuery('#calloutpop').fadeIn(500);
});

jQuery('#calloutpop').mouseout(function(event) {
   if (!$(event.relatedTarget).is('#callout')) {
      jQuery('#calloutpop').fadeOut(500);
   }
});

Tet rid of the mouseout code and change your hover code to:

jQuery('#callout').hover(
    function() {jQuery('#calloutpop').fadeIn(500)}
    ,
    function() {jQuery('#calloutpop').fadeOut(500)}
);