从自动填充列表中选择电子邮件时无法保留div

Question

当用户将鼠标悬停在登录框

时，脚本下方将创建效果淡入和淡出

<script>
$("#login").hover(function() {
    $("#loginForm").slideToggle('500').css('display', 'block');
}, function() {
    $("#loginForm").slideToggle('500')
});
</script>

但是当我想从<input type="name" name="email_address" />

中选择我的电子邮件时

此div #loginForm将自动关闭：

那么当用户从自动填充列表中选择他们的电子邮件地址时，如何保持此框始终显示？

此问题仅发生在浏览器mozilla firefox中。

仅供参考：更改为<input type="name" name="Email" /> ..这将列出您的Gmail电子邮件地址

Jsfiddle

Answer 1

我重写了你的HTML和脚本。如果文本框仍在focus，我将保持登录框打开。同时将slideToggle更改为slideUp/slideDown您可以尝试此操作

<强> HTML

<form>
<p id="login">     
    <span class="label">Login Here</span>       
    <span id="loginForm">        
        <span class="form-elements">
            <span class="form-label">Name:</span>
            <span class="form-field"><input type="name" name="email_address"  id="email"/></span>                        </span>        
        <span class="form-elements">
            <span class="form-label">Password:</span>
            <span class="form-field"><input type="password" id="pass"/></span>                    </span>        
        <span class="form-elements">
            <span class="submit-btn"><input type="submit" value="Submit" /></span>     
        </span>

    </span>          
</p>
</form>

<强>脚本

$("#login").hover(function() {
    $("#loginForm").slideDown('500').css('display', 'block');
}, function() {
    if($('#email').is(":focus") || $('#pass').is(":focus")) return false;
    $("#loginForm").slideUp('500')
});

演示：http://jsfiddle.net/r6sQP/4/

Answer 2

当浏览器创建下拉列表时，jQuery认为鼠标离开#login并再次向上滑动。为防止这种情况发生，您可以为slideUp动画添加延迟。我创建了一个fiddle来向您展示我的意思。

$("#login").hover(function () {
    $("#loginForm").clearQueue().slideDown(500);
}, function () {
    $("#loginForm").delay(1500).slideUp('500');
});

请注意clearQueue()方法。这将确保当用户选择了一封电子邮件并将鼠标悬停在包含#login的元素上时，它将阻止slideUp()发生。

Answer 3

我认为没有500毫秒会更好：

$("#loginForm").slideToggle().css('display', 'block');