: zatrzymanie po zatrzymaniu pola autouzupełniania

Question

Nigdy nie byłem wielkim fanem menu rozwijanych javascript, więc gdy będę mógł stylizować listę rozwijaną za pomocą CSS, zrobię to. Ale teraz napotykam na mały problem.

Mam przycisk logowania i mały moduł formularza logowania, który jest rodzeństwem przycisku. Po najechaniu myszką na przycisk, formularz logowania pojawia się bezpośrednio pod nim (Ustawiając na swoim bracie display:block) i możesz przejść do formularza, w którym znajduje się wskaźnik myszy nad formularzem, aby moduł formularza nie zniknął ponownie.

To wszystko jest bardzo proste:

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

A JSFiddle can be found here

Mam problem jest to, że po wpisaniu w piśmie, moja przeglądarka chce autouzupełniania. Jeśli na przykład napiszę "h", to opada "Hans Wassink". Ale kiedy umieściłem to pole autouzupełniania, cała sprawa wyskoczy jak bańka. Nie zawieszam już modułu logowania, aby zniknął. Bardzo irytujące. Czy jest coś, co mogę zrobić? Wiem, że mogę ustawić autouzupełnianie na "wyłączone", ale chcę, aby moi użytkownicy mieli tę opcję.

Zauważyłem, że dzieje się tak również, gdy używam tego samego rozwiązania, ale z jQuery.

EDYCJA: Aby ukończyć pytanie. Im na FF28/Windows. Ale moi koledzy tutaj mają to również na innych wersjach FF i na IE (Recepcjonistka, reszta ma prawdziwe przeglądarki :)).

Answer 1

Oto rozwiązanie Jquery.

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

.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; 
} 

kod jQuery

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