：在懸停自動填充字段後懸停停止

我從來不是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

：在懸停自動填充字段後懸停停止

回答

相關問題