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>