：在悬停自动填充字段后悬停停止

我从来不是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的其他版本（接待员，其余版本都有真正的浏览器:)）。

来源

2014-05-09 Hans Wassink

您使用的是什么浏览器？我使用Chrome版本34.0.1847.131米，它似乎工作正常。 – Ruddy

哪个浏览器？在Chrome中为我工作，使用相同的自动完成功能。 –

它在Chrome浏览器上工作正常，必须是您的浏览器出现问题。 –

这是一个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(); 
    } 
});

来源

2014-05-09 09:42:42 InventorX

答案已更新。其实“）;”缺少的是Jquery Code。现在更新代码运行良好。 – InventorX

嘿，使用这个jquery它的工作原理。但我仍然在寻找一个只是CSS解决方案 –

该浏览器列出了该自动完成列表。 CSS不可能。 – InventorX

：在悬停自动填充字段后悬停停止

回答

相关问题