I have a form that on subit hover i need to display a popup that disappears when the mouse is out of the popup div and the submit button. For now the hover popup is showing but when the mouse enters the popup, it disappears. Can some one help me solve this problem.

For now i have this code:

<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");
        });
    });
有帮助吗?

解决方案

Your popup is not part of the form. So when the mouse enters the popup it leaves the form. Define the popup inside the form-tag and it should work.

Something like this:

<form id="hover_form'. $id.'">
   <div id="button-popup"></div>
</form>
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top