JQUERY hover div 표시/숨기기 div

Question

나는 마우스를 팝업 div와 제출 버튼 밖으로 벗어날 때 사라지는 팝업을 표시해야하는 양식을 submit 호버에 표시합니다. 지금은 호버 팝업이 보이지만 마우스가 팝업으로 들어가면 사라집니다. 어떤 사람이이 문제를 해결할 수 있습니까?

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