slideDown y slideUp

[elena_22]

Hola a todos, tengo una duda, estoy haciendo una prueba con las funciones slideDown y slideUp, para mostrar un div sobre una imagen, quiero que al pasar el mouse por mi imagen, se muestre un div sobre esta, y cuando el mouse se quite de la imagen o del div que emergió se guarde de nuevo el div, he logrado que surga el div, y cuando salgo de la imagen se oculta perfecto, pero si me posiciono sobre el div se crea un ciclo, se muestra y oculta el div repetidas veces, que puedo hacer para que se quede quieto el div hasta quitar el mouse de el y la imagen???

mi estructura es la siguiente:

<div onmouseout="hidediv();">
<div id="tool" style="z-index: 1; width:177px; height:60px; position:absolute; z-index:1; background-color:#d8a92d; display:none; bottom:60%">contenido a mostrar</div>
<img src="foto.jpg" onmouseover="showdiv();" id="imagen" />
</div>


y estas son mis funciones:

function showdiv() {
$('#tool).slideDown(function(){});
}

function hidediv() {
$('#tool).fadeOut('slow');
}


Alguien me puede decir como solucionarlo? Mil gracias de antemano

[America|UNK]

el onmouseover="showdiv();" colócalo donde tienes el mouseout (en el div principal)

<div onmouseout="hidediv();">
<div id="tool" style="z-index: 1; width:177px; height:60px; position:absolute; z-index:1; background-color:#d8a92d; display:none; bottom:60%">contenido a mostrar</div>
<img src="foto.jpg" onmouseover="showdiv();" id="imagen" />
</div>

<div onmouseout="hidediv();" onmouseover="showdiv();" >
<div id="tool" style="z-index: 1; width:177px; height:60px; position:absolute; z-index:1; background-color:#d8a92d; display:none; bottom:60%">contenido a mostrar</div>
<img src="foto.jpg" id="imagen" />
</div>

Tema de jQuery

[elena_22]

hice lo que me aconsejaste y sigue haciendo el mismo efecto, se cicla, y aparace y desaparece repetidas veces el div.

<div onmouseover="showdiv();" onmouseout="hidediv();">
<div id="tool" style="z-index: 1; width:177px; height:60px; position:absolute; background-color:#d8a92d; display:none; bottom:60%"></div>
<img src="images/4.jpg" id="imagen" />
</div>

function showdiv() {
$('#tool).slideDown(400);
}
function hidediv() {
$('#tool).fadeOut('slow');
}

asi quedó, le quite el z-index al estilo pensando que eso podia afectar, alguna otra idea?

[elena_22]

lo soluciones con mouseleave, y ya va perfecto, muchas gracias por la ayuda