Question

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

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

一切都很简单：

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

A JSFiddle can be found here

我遇到的问题是，当我输入一封信时，我的浏览器想要自动完成。如果我例如输入＆＃34; h＆＃34;它下降＆＃34; Hans Wassink＆＃34;。但当我悬停那个自动完成框时，整个东西就像一个泡泡。我不再徘徊登录模块，所以它消失了。很烦人。有什么我能做的吗？我知道我可以将自动填充设置为“关闭”＃39;但我希望我的用户有这个选择。

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

编辑：完成问题。我在FF28 / Windows上。但是我的同事们在其他版本的FF和IE上都有它（接待员，其余的都有真正的浏览器:)）。

Answer 1

这是一个Jquery解决方案。

HTML CODE

<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 CODE

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

Answer 2

mouseenter和mouseleave的解决方案对我们没有用，当我们徘徊在建议列表上时，这些事件也会被触发。相反，我们在输入元素上听取了焦点/模糊。缺点是，一旦您开始在现场输入某些内容，用户就会在下拉列表外单击，无论他是否使用了自动填充功能。

 <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>

使用此jquery代码：

$('.login input').on('focus', function () {
    $('.login_form').addClass("open");
}).on('blur', function () {
    $(".login_form").removeClass("open");
});

当然这个css：

.open {display: block}

：悬停自动完成字段后悬停停止

2 个答案: