将鼠标悬停在打开的弹出窗口上，将鼠标悬停在关闭弹出窗口上，将鼠标悬停在弹出菜单上不应关闭弹出窗口

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