將鼠標懸停在打開的彈出窗口上，將鼠標懸停在關閉彈出窗口上，將鼠標懸停在彈出菜單上不應關閉彈出窗口

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，輸出