將鼠標懸停在打開的彈出窗口上，將鼠標移出關閉彈出窗口，彈出窗口應該不會關閉彈出窗口

鼠標懸停在我打開一個彈出窗口後，鼠標懸停我正在關閉彈出窗口。但在彈出的鼠標上方不應該關閉。彈出正在關閉。除了菜單鼠標懸停並彈出鼠標懸停在上面的位置，您將鼠標懸停在上面的位置應該關閉。對不起我的英語。請告訴某人如何更好地做到這一點。 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

將鼠標懸停在打開的彈出窗口上，將鼠標移出關閉彈出窗口，彈出窗口應該不會關閉彈出窗口

回答

相關問題