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

Question

将鼠标悬停在我打开一个弹出窗口，将鼠标悬停在我关闭弹出窗口。 但在其上方的弹出鼠标内部不应关闭。 弹出窗口正在关闭。 除了菜单鼠标悬停和弹出鼠标悬停之外，将鼠标悬停在其上的任何位置都应关闭。 对不起，我的英语。请建议某人如何做得更好。 演示版

我找到一种方法，但这不是正确的方法。

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

Bin： https ： //jsbin.com/bobuzo/edit？html，输出