Problemas al ocultar div

[mhax]

Saludos::::::::


lo que quiero hacer es ocultar un div al momento de que el mouse salga de este.
lo que hago es esto ( estoy usando el framework jquery ):

Este es el div que quiero ocultar

Código HTML:

<div id="panelsesion">
&nbsp;
 <table align="center">
   <tr>
    <td>Usuario</td>
    <td><input type="text" size="12" id="usuario"/></td>
   </tr>
      <tr>
    <td>Clave</td>
    <td><input type="password" size="12" id="clave"/></td>
   </tr>      
 </table>
 <input type="button" size="12" value="Iniciar"/> 
 <input type="button" size="12" value="Cerrar"/> 
</div>
 

este es el script que uso para ocultarlo

Código Javascript:

$(document).ready(inicializar);
 
function inicializar(){ 
    $("#panelsesion").mouseout(function(){
        $("#panelsesion").hide("slow");
    });
};
 

por si algo el estilo que tiene el div

Código CSS:

#panelsesion {
    position:absolute;
    left:688px;
    top:257px;
    width:187px;
    height:116px;
    z-index:15;
    background-color: #CC00CC;
    display:none;   
}
 

el problema es que cuando paso el mouse encima de algun elemento dentro del div ( label o cuadro de texto ), el div se oculta tambien. ¿Porque sucede esto?

Gracias

[Dany_s]

usa el evento mouseleave