Problemas con ajax

[mikehove]

Buenas amigo. Estuve trabajando un poco más con jquery, este es el efecto que más o menos necesito (logré), pero sé que está muy engorroso y necesito ayuda para limpiarlo.

El tema es que necesito que al posarse el mouse sobre el botón aparezca la carga de la página (que sí funciona correctamente ) y ahí 2 acciones:

• Si no toca el "div contenido" (o sea inferior) y se aleja del botón: el div inferior desaparece
• Si toca el "div contenido", otras 2 acciones:
  
• Si en el div contenido el mouse se aleja tocando el botón este no desaparece (ESTE ITEM FALTA CORREGIR: QUE NO SE RECARGUE)
• Si en el div contenido el mouse se aleja no tocando el botón este desaparece

Ahora muestro lo que conseguí:
HTML:

Código HTML:

<button type="button" id="boton">Cargar</button>
<div id="contenidoAjax" style="padding:; border: 1px solid #CCC; display:none; margin:-5px; "><p></p></div> 

Aquí subí el sitio en funcionamiento:
http://www.pruebaconjquery.zz.mu/

CSS:

Código:

.act{background-color: #FC4; display:none;}/*naranja*/

JS:

Código:

$(document).ready(function() {
	$("button#boton").hover(function (e) {
			
	   var $contenidoAjax = $('div#contenidoAjax').html('<p><img src="http://www.funcion13.com/wp-content/uploads/2012/04/loader.gif" /></p>');
	
       $contenidoAjax.load('recogida-de-datos.php').show();	  
	
       $(this).mouseleave(function (e) {			
		if($("div#contenidoAjax").hasClass('sel_check')){
			$('div#contenidoAjax').show();
			 $(this).mouseleave(function (e) {  
		  $('div#contenidoAjax').removeClass('act').hide(); 
		  }); 
			}	
			else{$("div#contenidoAjax").hide();};	
			e.propagationStop();
       });
	});
	
	
	$("div#contenidoAjax").hover(function (e) {		    	  
	      $('div#contenidoAjax').addClass('act').show(); 
		  $(this).mouseleave(function (e) {  
		  $('div#contenidoAjax').removeClass('act').hide(); 
		  });    
	});	
	
	
});