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

[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; 
        }
    });
});