Demo: http://www.christianbullock.com/so-demo/ (I know it's a bit rusty).
Screenshot: http://i46.tinypic.com/2rh7fgn.png
Hover over the blue rectangle to reveal the login panel. It works exactly how I'd like it to, with the exception that if you double-click one of the input forms to reveal the previously-entered usernames, by hovering over one of the suggested usernames the panel fades away...jQuery thinks my mouse has left the div when it actually hasn't.
Has anyone encountered anything like this before? Anyone know a fix?
Thanks.
Well the "autocomplete" plugin is going to add a <div> to hold the completion strings, and I'm pretty sure it adds that div to the end of the <body> content. Thus, when you mouse into that <div> you really are mousing out of your own form.
You could maybe have your handler explicitly treat the autocomplete <div> as being part of yours, or else you might be able to "move" the <div> the plugin adds into your own.
edit — if your problem stems from the native browser "autocomplete" dropdown (which you may want to disable for a login form anyway, if you can; try adding an "autocomplete" attribute and set it to "false"), then here's a possibility: in the event handler that fades your form container, you can check the current mouse position. If the mouse position is still within the bounding box of your form, then you can ignore the "mouseout".
