Como mostrar elemento si el mosue se mueve por encima de él yOcultarlo si no se mueve

[jaspher]

Hola amigos, bueno, he buscado por la web y no he encontrado algo que me pueda ayudar.
Quisiera pedirles porfavor como puedo mostrar un elemento "elem1" si el mouse se mueve encima de un elemento de nombre "elem2", y ocultar "elem1" luego de un tiempo por ejemplo 2 segundos después de que el mosue deja de moverse sobre elem2 .
Talvez me puedan ayudar esto con jQuery y gracias por la ayuda!!!!!

[walterdevel]

Primero que todo, el elemento no podés ocultarlo con display:none, lo tenés que hacer con visibility:hidden. Luego es simple:

con jquery:

Código HTML:

<div id="midiv" style="visibility:hidden"></div>
 

Código Javascript:

<script type="text/javascript">
$(document).ready(function(){
    $("#midiv").mouseover(function(){
           $(this).css('visibility', 'visible');
    });
 
    $("#midiv").mouseout(function(){
           $(this).css('visibility', 'hidden');
    });
});
</script>
 

[walterdevel]

Perdón, mala interpretación del problema XD:

con jquery:

Código HTML:

<div id="midiv1" style="width: 200px;height:200px;background:#ff1188"></div>
<div id="midiv2" style="display:none;width: 200px;height:200px;background:#ff0044"></div>
 

Código Javascript:

<script type="text/javascript">
$(document).ready(function(){
    unbindAndBind($("#midiv1"), $("#midiv2"));
});
 
 
function unbindAndBind(obj1, obj2) {
    $(obj1).unbind("mouseover");
    setTimeout(function(){
         $(obj1).mouseover(function(){
           $(this).hide();
           $(obj2).show();
           unbindAndBind(obj2, obj1);
         });
     }, 2000);
}
</script>
 

[jaspher]

Iniciado por walterdevel

Wuau,
Amigo, pero como haria para no ocultar "elem2" o "midiv2" ques donde se va ha mover el mouse, solo quiero ocultar el "elem1", un bosqueko o guia seria por ejemplo un reproductor de video, mueves el mouse encima del video y se muestra el panel de controles, y cuando dejaas de moverlos, para un ratito y se oculta el panel de controles.
De antemano muchas gracias por la ayuda.
saludos.

[walterdevel]

Ahí vá lo solución posta XD

Código HTML:

<div id="midiv1" style="width: 200px;height:200px;background:#ff1188">
 
<div id="midiv2" style="display:none;width: 50px;height:50px;background:blue">
</div>
 
</div>
 

Código Javascript:

mouseisover = false;
$(document).ready(function(){
 
    $("#midiv1").mouseover(function(){
        if($("#midiv2").is(":hidden")) {
            $("#midiv2").fadeIn(300);
            mouseisover = false;
        }
    }).mouseout(function(){
        if($("#midiv2").is(":visible") && mouseisover == false) {
            setTimeout(function(){
                if(mouseisover == false)
                    $("#midiv2").fadeOut(300);
            }, 2000);   
        }
    });
    
    $("#midiv2").mouseover(function(){
            mouseisover = true;
    }).mouseout(function(){
        if($("#midiv2").is(":visible")) {
            $("#midiv2").fadeOut(300);
            mouseisover = false; 
        }
    });
});