我从来不是
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(接待员,其余的有真正的浏览器:)).
解决方法
这是一个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 CODE
$('.login').on('mouSEOver',function () {
$('.login_form',this).show();
}).on('mouSEOut',function (e) {
if (!$(e.target).is('input')) {
$('.login_form',this).hide();
}
});