: il passaggio del mouse si interrompe dopo il passaggio del campo di completamento automatico

Question

Non sono mai stato un grande fan degli elenchi a discesa di JavaScript, quindi quando posso creare un menu a discesa utilizzando CSS lo farò. Ma ora sto imbattendo in un piccolo problema.

Ho un pulsante di accesso e un modulo modulo di accesso piccolo, che è un fratello del pulsante. Quando si passa il mouse sopra il pulsante, il modulo di accesso viene visualizzato direttamente sotto di esso (Impostando display:block su suo fratello) e si può andare al modulo in cui il passaggio del mouse sul modulo prende il sopravvento così il modulo modulo non scompare di nuovo.

E 'tutto abbastanza facile:

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

A JSFiddle can be found here

Il problema che ho è che quando si digita in una lettera, il mio browser vuole completare automaticamente. Se per esempio digito "h" scende "Hans Wassink". Ma quando passo il mouse su quella casella di completamento automatico, l'intera cosa si apre come una bolla. Non sto più passando il mouse sul modulo di login in modo che scompaia. Molto noioso. C'è qualcosa che posso fare? So che posso impostare il completamento automatico su "off", ma voglio che i miei utenti abbiano questa opzione.

Ho notato che succede anche quando uso la stessa soluzione ma con jQuery.

MODIFICA: per completare la domanda. Sono su FF28/Windows. Ma i miei colleghi lo hanno anche su altre versioni di FF e su IE (l'addetto alla reception, il resto ha veri browser :)).

Answer 1

Ecco una soluzione Jquery.

HTML CODICE

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

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

codice jQuery

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