Açık pencerede açılır, açık pencereyi kapat, açılır pencereyi kapat, pencereyi kapatmamaya dikkat et

Question

fareyi açarak bir pop-up açıyorum, fareyi kapatıyorum kapatıyorum. ama içindeki pop-up farenin içinde kapanmamalı. açılır pencere kapanıyor. menü fare dışında ve üzerinde fareyle üzerine fareyi farz edersiniz. benim ingilizce için özür dilerim. Demo

Tek bir yol buluyorum ama bu doğru bir yol değil.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> 
<link href='css/nprogress.css' rel='stylesheet' /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<div style="width: 100%; height: 400px;" id="main_content"> 
<div id="mouse_over" class="showingMenuCity" style="background: red; padding: 10px; width: 150px; float: right;">Mouse over Menu</div> 
<div style="height: 450px; background: green;"></div> 
<script> 
$(function(){ 

    $('#mouse_over').mouseover(function(){ 
     $("#video").slideDown("slow"); 
    }); 
    $('#main_content').mouseover(function(event){ 
     var targetClassName=event.target.className; 
     if(targetClassName.indexOf("showingMenuCity") >=0){ 

     }else{ 
      $("#video").slideUp("slow"); 
     } 
    }); 
}); 
</script> 


<div class="container showingMenuCity" id="video" > 
    <div class="row showingMenuCity"> 
    <div class="col-sm-12 showingMenuCity"> 
     <h3 class="showingMenuCity">Popular Cities</h3> 
     <ul class="bsCityUl showingMenuCity"> 
     <li class="bsCityLs showingMenuCity">Chennai</li> 
     <li class="bsCityLs showingMenuCity">Chennai</li> 
     <li class="bsCityLs showingMenuCity">Chennai</li> 
     <li class="bsCityLs showingMenuCity">Chennai</li> 
     </ul> 
     <h3 class="showingMenuCity">Other Cities</h3> 
     <ul class="bsCityUl showingMenuCity"> 
     <li class="bsCityLs showingMenuCity">Chennai</li> 
     <li class="bsCityLs showingMenuCity">Chennai</li> 
     <li class="bsCityLs showingMenuCity">Chennai</li> 
     <li class="bsCityLs showingMenuCity">Chennai</li> 
     </ul> 
    </div> 
    </div> 
</div> 
</div> 

<style> 
.bsCityLs { float: left; margin: 2px 6px; list-style: none; } 
.bsCityUl { width: 100%; } 
#video 
{ 
    background: #fff; 
    display:none; 
    width:35%; 
    border: 1px solid #000; 
    right: 0; 
    position: absolute; 
    top:-12px; 
} 
</style> 

Answer 1

Sana aşağıdaki çözümü

$(function(){ 
    var videoNode = $('#video'); 

    $('#mouse_over').on('mouseenter',function(){ 
     videoNode.slideDown("slow"); 
    }); 

    videoNode.on('mouseleave', function(event){ 
     $(this).slideUp("slow"); 
    }); 
}); 

Bin önerecek ediyorum: Temelde https://jsbin.com/bobuzo/edit?html,output