Cita:
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.
