JQUERY懸停顯示/隱藏div

Question

我有一個窗體，在子懸停我需要顯示一個彈出窗口，當鼠標不在彈出的div和提交按鈕時消失。現在懸停彈出窗口顯示，但是當鼠標進入彈出窗口時，它會消失。有人能幫我解決這個問題嗎？

現在我有這樣的代碼：

<form name="email_form" id="hover_form'. $id.'" style="float: left;width: 150px;text-align: center;padding-bottom: 10px;"> 
    <input id="counter_btn'. $id.'" type="button" value="" style="margin-bottom:10px;float:left;height: 50px;width:50px;background: none;border: none;background-image: url(../images/email_counterbtn.png);background-size: 30px;background-repeat: no-repeat;background-position: center;"/> 
    </form> 
    <script> 
    $(document).ready(function(){ 
    $("#hover_form'. $id.'") 
    .on("mouseenter", function() { 
    $(".btnpopup'. $id.'").fadeIn("fast"); 
    }) 
    .on("mouseleave", function() { 
    $(".btnpopup'. $id.'").fadeOut("fast"); 
    }); 

    }); 
    </script> 
    <div id="button-popup" class="btnpopup'. $id.'"> 
    <div style="width: 0px;height: 0px;border-style: solid;border-width: 10px 20px 10px 0;border-color: transparent #009dde transparent transparent;line-height: 0px;_border-color: #000000 #009dde #000000 #000000;margin-left: -25px;margin-bottom: -40px;position: absolute;bottom: 65px;"></div> 
      <p id="_email'. $id.'" style="border-bottom:1px solid white;cursor:pointer;">Email</p> 
      <p id="_calendar'. $id.'" style="cursor:pointer;">Calendar</p> 
      <script> 
      $(document).ready(function(){ 
     $("#_email'. $id.'").click(function() { 
      $("#counter'. $id.'").show("fast"); 
     }); 
     $("#_calendar'. $id.'").click(function() { 
      $(".timepopup'. $id.'").show("fast"); 
     }); 
    }); 

Answer 1

您的彈出是不是形式的一部分。所以當鼠標進入彈出窗口時，它會離開窗體。定義窗體標籤內的彈出窗口，它應該工作。

事情是這樣的：

<form id="hover_form'. $id.'"> 
    <div id="button-popup"></div> 
</form>