Question

我有一个按钮并使用jQuery悬停来显示表单。悬停工作完美，但当我想填写表单时，文本框将显示自动建议。当我将鼠标悬停在自动建议上时，表单会淡出。我可以用什么技术来解决这个问题？

<div class="dropdown-menu" style="width:600px; height: 350px;padding:40px 40px;">
                                        <h2>Sign In</h2>
                                        <p class="dropdown-text-p" style="font-size:12px;margin-top:20px;">Don't have an account? Create your account. It's take less then a minutes</p>
                                        <form class="form" id="formLogin">
                                            <div class="form-group">
                                                <input type="text" autocomplete="false" class="form-control sign-in-dropdown-input" id="name" placeholder="User Name">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" class="form-control sign-in-dropdown-input" id="password" placeholder="Password">
                                            </div>
                                            <div style="margin-top:30px;">
                                                <div class="input-field s4">
                                                    <input type="submit" value="Sign In" class="waves-effect waves-light log-in-btn"> </div>
                                            </div>
                                        </form>
                                    </div>

<script>

$(document).ready(function(){
    $(".sign-in-dropdown").hover(function(){
        $(".dropdown-menu").fadeIn();
        }, function(){
        $(".dropdown-menu").css("display", "none");
    });

        $(".dropdown-menu").hover(function(){
             $(".dropdown-menu").css("display", "block");
             }, function(){
             $(".dropdown-menu").fadeOut();
     });

     $(".dropdown-menu").click(function(){
            $(".dropdown-menu").css("display", "block");
    });

    $( ".sign-in-dropdown-input" ).focus(function() {
      $(".dropdown-menu").css("display", "block");
    });
});
</script>

Answer 1

不，我的意思是当我将鼠标悬停在登录按钮上时，表单将会淡入，之后我填写表单（不按提交按钮）并从表单中释放鼠标。形式不淡出。

我已经编辑了你的代码。检查代码段。它完全按照您在上面引用的文字中所说的那样工作。

＆＃13;

$(document).ready(function(){
    $(".sign-in-dropdown").hover(function(){
        $(".dropdown-menu").fadeIn();
        }, function(){
        $(".dropdown-menu").css("display", "none");
    });

       $(".dropdown-menu").hover(function(){
             $(".dropdown-menu").css("display", "block");
             });
             

     $(".dropdown-menu").click(function(){
            $(".dropdown-menu").css("display", "block");
    });

    $( ".sign-in-dropdown-input" ).focus(function() {
      $(".dropdown-menu").css("display", "block");
    });
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dropdown">
<button class="btn btn-danger sign-in-dropdown">SIGN IN</button>

<div class="dropdown-menu" style="width:600px; height: 350px;padding:40px 40px;">
     <h2>Sign In</h2>
     <p class="dropdown-text-p" style="font-size:12px;margin-top:20px;">Don't have an account? Create your account. It's take less then a minutes</p>
     <form class="form" id="formLogin">
        <div class="form-group">
            <input type="text" autocomplete="false" class="form-control sign-in-dropdown-input" id="name" placeholder="User Name">
        </div>
        <div class="form-group">
            <input type="password" class="form-control sign-in-dropdown-input" id="password" placeholder="Password">
        </div>

        <div style="margin-top:30px;">
            <div class="input-field s4">
                <input id="sign-in-btn" type="submit" value="Sign In" class="waves-effect waves-light log-in-btn"> 
            </div>
        </div>
     </form>
</div>
</div>

＆＃13;

悬停在自动提示后，jQuery悬停不起作用

1 个答案: