Problema al mostrar/ocultar div

[Marti1982]

Hola, tengo un script hecho con jquery que al pasar el raton por un div en concreto, muestra otro div algo más grande encima de este mostrando mas información, y al quitar el raton de este div abierto, este se oculta.
El problema que tengo es que esto funciona bien si uno pasa el raton por encima a velocidad normal, pero si lo haces rapidamente se queda el div abierto, sin ocultarse de nuevo.
La solución que se me ha ocurrido es que al pasar el raton por encima de cualquier elemento de la web que no sea el div abierto, este se cierre, lo que no se como es el codigo que tendria que poner, a ver si me podeis echar una mano.
Gracias por adelantado.

[Marti1982]

Os dejo el script que cierra el div que se ha abierto una vez se quita el raton de encima de el:

Código PHP:

  // Al dejar de pasar por encima de la info abierta, esta se cierra 
$(div_show_this).hover(function(){},function(){ 
        $(div_show_this).css("display","none"); // Oculta el div que se acaba de abrir al dejar de pasar el raton por encima del mismo 
        $(div_class).fadeIn("slow"); // Muestra el div que se habia ocultado 
    });  
   

div_show_this y div_class son variables que contienen, respectivamente, el nombre del div abierto que se ocultara de nuevo, y el div que se muestra de nuevo y que habia quedado oculto encima del recien abierto.

A ver si alguien me puede ayudar para modificar el script de tal forma que el div recien abierto se oculte al pasar el raton por cualquier elemento que no sea el mismo.

[Marti1982]

Dicho de una forma mas sencilla, un codigo para cerrar un div, al pasar el raton por encima de cualquier otro elemento de la web que no sea dicho div.
Gracias!

[mayid]

Antes de hacer lo que pedís, deberíamos rever la sintaxis para jquery. Te falta las comillas, y las almohadillas...

// Al dejar de pasar por encima de la info abierta, esta se cierra
$("#div_show_this").hover(function(){},function(){
$("#div_show_this").css("display","none"); // Oculta el div que se acaba de abrir al dejar de pasar el raton por encima del mismo
$("#div_class").fadeIn("slow"); // Muestra el div que se habia ocultado
});

Ahora, lo que podemos probar es usar el selector :not()

$(":not(#div_show_tata)").hover(...)

ref: http://docs.jquery.com/Selectors

[Marti1982]

Gracias por tu respuesta mayid. Voy a probar lo que dices a ver si me da resultadoy te cuento.
Respecto a la sintaxis, esta bien, recuerda que son variables que contienene el nombre de la id, por eso no llevan almohadillas ni las comillas. Un saludo.

[mayid]

Si, es cierto. Es solo que no las vi declaradas.

[hector2c]

ahi va !!!

Código PHP:

  $(document).ready(function(){ 
 
    xOffset = 10; 
    yOffset = 20;         
 
    $("a.tooltip").hover(function(e){                                               
        this.t = this.title; 
        this.title = "";                                       
        $("body").append("<p id='tooltip'>"+ this.t +"</p>"); 
        $("#tooltip") 
            .css("top",(e.pageY - xOffset) + "px") 
            .css("left",(e.pageX + yOffset) + "px") 
            .fadeIn("fast");         
    }, 
    function(){ 
        this.title = this.t;         
        $("#tooltip").remove(); 
    });     
 
    $("a.tooltip").mousemove(function(e){ 
        $("#tooltip") 
            .css("top",(e.pageY - xOffset) + "px") 
            .css("left",(e.pageX + yOffset) + "px"); 
    });             
 
});  
   

y este es el html

Código HTML:

<ul>
	<li><a class="tooltip" title="primer item">lalalala</a></li>
    <li><a class="tooltip" title="segundo item">asdfasdfas</a></li>
    <li><a title="tercer item">asdfasdfasd</a></li>
</ul>
<style type="text/css">
	#tooltip{
		position:absolute;
		border:1px solid #333;
		background:#f7f5d1;
		padding:2px 5px;
		color:#333;
		display:none;
	}
</style> 

pues, funciona eXelente, llamado tooltip, mas información puedes ver el enlace del autor

[Marti1982]

Hola de nuevo. Tu ejemplo funciona perfectamente hector2c, no se me habia ocurrido que las tooltips podrian ayudarme, llevo poco con js poco tiempo.

Voy a intentar adaptarlo, ya que veras lo que quiero es algo diferente, para entedernos, quiero que el tooltip que aparece, se quede estatico encima del div donde se ha pasado el raton ocultandolo (eso ya lo he conseguido), y al "sacar" el raton de encima de este tooltip que acaba de aparecer, este desaparezca de nuevo. Esto ultimo es lo que no me acaba de salir bien.

No se si me he explicado bien, jeje. Agradezco de veras la ayuda prestada.

[hector2c]

aaaaaaa, entonces, deseas algo como un menu desplegable? que al pasar el mouse encima, aparesca un div a lado y que al perder el foco del div flotante, este desaparesca?

[Marti1982]

Iniciado por hector2c

aaaaaaa, entonces, deseas algo como un menu desplegable? que al pasar el mouse encima, aparesca un div a lado y que al perder el foco del div flotante, este desaparesca?

Os pongo un ejemplo simplificado de lo que quiero conseguir, si pasais el raton lo suficientemente deprisa vereis que el div gris que aparece se queda abierto, y en lo que estoy haciendo es muy molesto, pues hay muchos divs de este tipo en la pagina.

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 
<script src="http://code.jquery.com/jquery-1.4.js" type="text/javascript"></script> 
 
<script type="text/javascript"> 
$(document).ready(function(){ 
                            
// Por cada div con la clase "pasar_raton" se muestra un div encima 
$('div[class="pasar_raton"]').each(function() { 
                                           
    $(this).hover(function(){ 
            $(this).css("display","none"); 
            $(this).siblings("div").fadeIn("fast",function(){ 
                $(this).hover(function(){},function(){ 
                $(this).css("display","none");     
                $(this).siblings("div").css("display","block"); 
            }); 
        }); 
    }); 
}); 
 
}); 
</script> 
 
<style> 
 
body { 
    margin: 20px; 
    font-family: arial; 
    font-size: 12px; 
    margin: 0 5%; 
} 
 
.pasar_raton { 
    float: left; 
    margin: 15px; 
    width: 150px; 
    padding: 10px; 
    border: 1px solid; 
    height: 100px; 
} 
 
.div_a_mostrar { 
    position: relative; 
    z-index: 500; 
    display: none; 
    float: left; 
    margin: 15px; 
    background: #eee; 
    width: 200px; 
    padding: 10px; 
    border: 1px solid; 
    height: 150px; 
    -moz-box-shadow: 4px 4px 10px #ccc; 
} 
</style> 
</head> 
 
<body> 
 
<div> 
    <div class="pasar_raton"> 
        Pasa el raton por encima. 
    </div> 
    <div class="div_a_mostrar"> 
        <div> 
            Pasa el raton por encima.<p/> 
        </div> 
        <div> 
            Este es el div que se muestra al pasar el raton por encima mostrando el anterior contenido más informacion adicional 
        </div> 
    </div> 
</div> 
 
</body> 
</html>  
  

Solo teneis que copiar y pegar.