マウスオーバーポップアップ、クローズアップポップアップ、ポップアップマウスオーバーでポップアップを閉じないでください

Question

マウスオーバー私はポップアップを1つ開きます。マウスはポップアップを閉じます。その上のポップアップマウスの内側は閉じてはいけません。ポップアップが閉じています。 メニューマウスの上にポップアップマウスを置いてください。私の英語のために申し訳ありません。 Demo

これは正しい方法ではありません。

<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

私はあなたに次のソリューション

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

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

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

ビンを提案したい：基本的にはhttps://jsbin.com/bobuzo/edit?html,output