jquery - :hover stops after hovering autocomplete field

Question

我从来都不是 javascript 下拉菜单的忠实粉丝，所以当我可以使用 CSS 设计下拉菜单时，我会的。但是现在我遇到了一个小问题。

我有一个登录按钮和一个小的登录表单模块，它是按钮的兄弟。当我将鼠标悬停在按钮上时，登录表单会直接显示在它的下方(通过在他的兄弟上设置 display:block )，您可以转到将鼠标悬停在表单上的表单，这样表单模块不会再次消失。

一切都很简单:

#home-login-button:hover + #login, #login:hover {
    display: block;
}

A JSFiddle can be found here

我遇到的问题是，当我输入字母时，我的浏览器想要自动完成。例如，如果我输入“h”，它会下拉“Hans Wassink”。但是当我将鼠标悬停在那个自动完成框上时，整个事情就像一个气泡一样弹出。我不再悬停在登录模块上，所以它消失了。很烦人。有什么我可以做的吗？我知道我可以将自动完成设置为“关闭”，但我希望我的用户拥有该选项。

我注意到当我使用相同的解决方案但使用 jQuery 时也会发生这种情况。

编辑:完成问题。我在 FF28/Windows 上。但是我这里的同事在其他版本的 FF 和 IE 上也有它(接待员，其他人有真正的浏览器:))。

Answer 1

这是一个 Jquery 解决方案。

HTML代码

<div class="login"> <span>Login</span>

    <div class="login_form">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" value="" />
    </div>
</div>

CSS 代码

.login {
    position: relative;
    height:60px;
    width:50px;
    margin:30px;
}
.login > span {
    cursor: pointer;
}
.login_form {
    box-shadow: 0 0 1px;
    padding:10px;
    position: absolute;
    left: 0px;
    top: 30px;
    z-index: 9999;
    display: none;
}

JQUERY 代码

$('.login').on('mouseover', function () {
    $('.login_form', this).show();
}).on('mouseout', function (e) {
    if (!$(e.target).is('input')) {
        $('.login_form', this).hide();
    }
});