将鼠标悬停在打开的弹出窗口上，将鼠标移出关闭弹出窗口，弹出窗口应该不会关闭弹出窗口

鼠标悬停在我打开一个弹出窗口后，鼠标悬停我正在关闭弹出窗口。但在弹出的鼠标上方不应该关闭。弹出正在关闭。除了菜单鼠标悬停并弹出鼠标悬停在上面的位置，您将鼠标悬停在上面的位置应该关闭。对不起我的英语。请告诉某人如何更好地做到这一点。 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>

来源

2016-03-25 varun kumar

基本上你有一个菜单栏，如果你将鼠标悬停在菜单选项中的一个，你会得到一个弹出/莫代尔。然后在那个弹出窗口中你会有一些内容。如果您再次将鼠标移到该内容上，则应关闭弹出窗口。这是你想说的吗？纠正我，如果我错了 – Ramkee

感谢您的小提琴，所以如果你把光标放在“热门城市”弹出窗口应该关闭？ – Ramkee

多数民众赞成多数民众赞成只有我需要Ramkee ...雅弹出正在关闭.. –

我建议你以下解决方案

$(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

来源

2016-03-25 14:45:32

将鼠标悬停在打开的弹出窗口上，将鼠标移出关闭弹出窗口，弹出窗口应该不会关闭弹出窗口

回答

相关问题