Hola, estoy intentando hacer que en mi página web, cuando haces clic sobre el nombre de un usuario, se abra una pequeña ventanita con un poco de información personal justo por encima del link, hasta aquí bien, pero me gustaría saber como hacerla desaparecer solo cuando el cursor salga de la ventanita.
Por ahora, la ventanita desaparece cuando el cursor se sale de algún texto o de alguna de las imágenes, pero me gustaría que esta se mantuviera mostrándose mientras no salga el cursor de ella, incluyendo el fondo.
El código HTML usado es el siguiente:
Código HTML:
<span class="index_name_link">
<a href="javascript:show_profile('0', 'friend_profile')">
Nombre Usuario
</a>
<div id="friend_profile" class="small_profile" onmouseout="hide_profile('friend_profile')" >
(Texto de la ventanita)
</div>
</span> El Javascript usado:
Código HTML:
function show_profile(user, element){
element2 = document.getElementById(element);
element2.style.display="block"
}
function hide_profile(element){
element2 = document.getElementById(element);
element2.style.display="none"
}
El CSS por si sirve:
Código HTML:
.index_name_link{
position: relative;
}
.small_profile{
display: none;
border: 1px solid black;
background-image:url("../images/interface/top/time_bg.png");
color: #FFFFFF;
width: 200px;
height: 100px;
position: absolute;
top: -15px;
left: -15px;
z-index:5;
}