Mouse over open popup, mouse out close popup, popup moue over should not close popup

Question

mouse over i'm opening one popup, mouse out i'm closing popup. but inside that popup mouse over it should not close. popup is closing. except menu mouse over and popup mouse over , where ever you mouse over it should close. sorry for my english .please suggest someone how to do this better. Demo

i'm find out one way but this is not correct way.

<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

I'd propose you the following solution

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

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

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

Bin: https://jsbin.com/bobuzo/edit?html,output