Jquery: if-else condition with hover function?

JavaScript
1

Hi,

can I set if-else condition with hover function? I want to load a page next to the text link when I hover it and I want to be able to hover/ mouseover on the loaded content. but this loaded content will be removed under two situations:

  1. when the mouse leave the loaded content. http://nano-visions.net/dump/jquery.hover/1.html
  2. when the mouse leave the box that holds the text link. http://nano-visions.net/dump/jquery.hover/2.html

but I have the problem with the situation number 2 - if I apply the hover function on number-2, the number 1 just won’t happen. the loaded content is removed immediately when my mouse leave the text link box.

So, I am thinking to put else-if condition to the hover function if possible (or any other better ideas if you have any?? thanks!) - I want to remove the loaded content only if the situation number does not occur. if I have moused over on the loaded content, then don’t apply situation number 2, until my mouse leave the loaded content area.

below is the jquery,

$(document).ready(function() {
        $(".button").hover(function(e){
    		
    		$('.wrapper-item-content').remove();
    		
    		var parent = $(this).parent();
    		$(this).parent().addClass('current');
    		
    		
    		var parent_top = parent.offset().top-180;
    		var parent_left = parent.offset().left+80;
    			
    		$("body").append('<div class="wrapper-item-content"></div>');
    		
    		$(".wrapper-item-content").css({
    			top: parent_top,
    			left: parent_left,
    			position: 'absolute',
    			zIndex: '100',
    			width: '350px',
    			height: '100%',
    			overflow: 'visible',
    			border: '1px solid #000'
    		});
    		
    		var path_url = $(this).attr('href');
    		var path_file = $(this).attr('rel');
    		var item_wrapper = $('.wrapper-item-content');
    		
    		var array_url = path_url.split('/');
    		var pg_url = $(array_url).last()[0];
    		
    		item_wrapper.load(path_file+'?url='+pg_url, function(){
    			
    			item_wrapper.hover(function() {
    				item_wrapper.addClass('mouseenter');
    			},function(){
    				item_wrapper.removeClass('mouseenter');
    				parent.removeClass('current');
    				item_wrapper.remove();
    			});	
    			
    			parent.hover(function() {
    				//something
    			},function(){
    				
    				if(item_wrapper.hasClass('mouseenter'))
    				{
    					//alert('has mouseenter');
    				}
    				else
    				{
    					//alert('has no mouseenter');
    					parent.removeClass('current');
    					item_wrapper.remove();
    				}
    			});
    
    		});
    		
        },
    	function(){
    		
        });	
    });

the html,

<div class="box"><a href="#" class="button" rel="content.php">Hover me</a></div>

thanks.