CODEWITHSUNDEEP
javascriptjqueryhover
tctc91
tctc91

Reputation: 1363

After showing div on hover, hide it if anywhere other than that div is hovered

I want the div (.modal) to disappear on mouse out but only if the hover is not on the .modal or .tooltip classes.

My code:

    jQuery('html').hover(function() {
        jQuery('.modal').fadeOut('fast');
    });        
    jQuery('.tooltip, .modal').hover(function(event){  
        var toolTipId = jQuery(this).attr('id'); 
            modal = jQuery(this).parent().next().find('.'+toolTipId+'');          
        if(!modal.is(":visible")) {
            modal.stop().fadeIn('fast');
        }
        event.stopPropagation();
    });

This works perfect if using click instead of hover. How can I adapt this to work on hover?

Upvotes: 0

Views: 537

Answers (1)

Pete
Pete

Reputation: 58462

can you do something like this:

jQuery('.tooltip, .modal').mouseenter(function(event){  
    //not sure what your modal variable is in your original code but it looks as if it is just the object you are hovering as you use it's id to get it in again so I replaced it with jQuery(this)
    if(!jQuery(this).is(":visible")) {
        jQuery(this).stop().fadeIn('fast');
    }
    event.stopPropagation();
});

jQuery('.tooltip, .modal').mouseleave(function() {
    jQuery(this).stop().fadeOut('fast');
});

Upvotes: 1

Related Questions