: Hover stoppt nach Hovering Autocomplete-Feld

Question

Ich war noch nie ein großer Fan von Javascript-Dropdowns, wenn ich ein Drop-Down mit CSS style ich werde. Aber jetzt stoße ich auf ein kleines Problem.

Ich habe einen Login-Button und ein kleines Login-Formular-Modul, das ein Geschwister der Schaltfläche ist. Wenn ich den Mauszeiger über den Button halte, erscheint das Login-Formular direkt darunter (durch Setzen von display:block auf seinen Bruder) und Sie können zu dem Formular wechseln, wo der Mauszeiger über das Formular wechselt, damit das Formularmodul nicht wieder verschwindet.

Es ist alles ziemlich einfach:

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

A JSFiddle can be found here

Das Problem, das ich ist haben, dass, wenn ich in einem Brief schreiben, mein Browser automatisch zu vervollständigen will. Wenn ich zum Beispiel "h" schreibe, wird "Hans Wassink" gelöscht. Aber wenn ich diese Autocomplete-Box schwebe, erscheint das Ganze wie eine Blase. Ich schwebe nicht mehr das Login-Modul, so dass es verschwindet. Sehr nervig. Kann ich irgendetwas tun? Ich weiß, dass ich die automatische Vervollständigung auf "aus" setzen kann, aber ich möchte, dass meine Benutzer diese Option haben.

Ich bemerkte, dass es auch passiert, wenn ich die gleiche Lösung aber mit jQuery verwende.

EDIT: Um die Frage zu vervollständigen. Ich bin auf FF28/Windows. Aber meine Kollegen hier haben es auch auf anderen Versionen von FF und IE (der Rezeptionist, der Rest hat echte Browser :)).

Answer 1

Hier ist eine Jquery-Lösung.

HTML CODE

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

JQUERY CODE

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