Question

我有一个表格，在subit悬停时我需要显示一个弹出窗口，当鼠标离开弹出窗口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-tag中定义弹出窗口，它应该可以工作。

这样的事情：

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

JQUERY悬停显示/隐藏div

1 个答案: