格徘徊在Firefox中的自动完成输入时消失 [英] Div disappears when hovering the input autocomplete in Firefox

问题描述

我做了一个的jsfiddle 。< BR>结果
这是盘旋在菜单中的迹象，但徘徊在输入自动完成登录表单消失时出现一个登录表单，我不希望出现这种情况。搜索结果
我怎样才能让登录表单住宿没有禁用输入自动完成，可以这样只用CSS做？

 ＆LT; D​​IV CLASS =登陆GT＆; ＆LT;跨度＆GT;登录＆lt; / SPAN＆GT;  ＆LT; D​​IV CLASS =login_form＆GT;
    ＆LT;标签=电子邮件＆GT;电子邮件：＆LT; /标签＆gt;
    ＆LT;输入类型=文本ID =电子邮件NAME =电子邮件值=/＆GT;
    ＆LT;标签=通行证＆GT;密码：LT; /标签＆gt;
    ＆LT;输入类型=密码ID =通行证NAME =通过值=/＆GT;
    ＆LT;输入类型=提交级=值=登录/＆GT;
  ＆LT; / DIV＆GT;＆LT; / DIV＆GT;。登录 {
  位置：相对;
  高度：60像素;
  宽度：50像素;
  保证金：30PX;
}
的.login：悬停.login_form {
  显示：块;
}
。登录表单 {
  的box-shadow：0 0 1px的;
  填充：10px的;
  位置：绝对的;
  左：0像素;
  顶部：30PX;
  的z-index：9999;
  显示：无;
}
 

解决方案

不是一个很好的解决方案，但真正有用的提示：的 http://jsfiddle.net/ymDTj/2/

使用JavaScript（jQuery的）：

  $（'登录'）。在（'鼠标悬停'，函数（）{
    $（'。login_form'，这一点）.show（）;
}）。在（'鼠标移开，功能（E）{
    如果（！$（e.target）。是（'输入'））{
        $（'。login_form'，这一点）.hide（）;
    }
}）;
 

I've made up a JSFiddle.

It's a login form that appears when hovering the Sign In menu, but when hovering the input autocomplete the login form disappears, and I don't want that.

How can I make the login form stay without disabling the input autocomplete, can this be made only with css?

<div class="login"> <span>Sign in</span>

  <div class="login_form">
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" value="" />
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="pass" value="" />
    <input type="submit" class="" value="Sign in" />
  </div>

</div>

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

解决方案

Not a good solution, but a really useful hint: http://jsfiddle.net/ymDTj/2/

Using JavaScript (jQuery):

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

这篇关于格徘徊在Firefox中的自动完成输入时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！