Question

really new to JQuery.. like 2 hours new. Began to write a drop down menu for a login box like this:
HTML:

<button id="loginButton">Login</button> 

When you hover over that, this JQuery runs:

$('#loginButton').live('hover', function() {
    login_drop();   
});

function login_drop(){
$('#loginBox').fadeIn();

}

$('#loginButton').live('hover', function() {
    login_away();

});

function login_away(){
$('#loginBox').fadeOut();
}

And then this HTML DIV appears directly under the button:

<div id="loginBox">                
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span><a href="#">Forgot your password?</a></span>
</div>

and the CSS on that DIV is this:

#loginBox {
    position:absolute;
    top:70px;
    right:100px;
    display:none;
 z-index:1;
}

This all works, but the behavior of it stinks. How do I make it so you can hover over the button put your mouse in the newly appeared DIV and the div won’t fade away until your mouse leaves the div?

Sorry if my coding stinks.
Thanks a bunch guys!

——————————–EDITS AKA the ANSWERS——————–
So for all of you reading this down the line. There are so many ways of making this work depending on how you want the user to interact with it.

Here is way 1…This way the login box fades out when your mouse leaves the login button. This is a quick way fo making it work. This answer is thanks to elclanrs besure to Up 1 his answer below if you like this.

JQuery:

$(function(){
$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); }); 
$('#login').mouseout(function(){ $('#loginBox').fadeOut(); }); 
});

HTML:

<div id="loginBox">                
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span><a href="#">Forgot your password?</a></span>
</div>

CSS:

#loginBox {
position:absolute;
top:70px;
right:100px;
width:200px;
height:200px;
display:none;
z-index:99;
background:url(../images/162.png);
}

WAY 2 is adding is a cancel button like Jared Farrish did here:
http://jsfiddle.net/j4Sj5/4/
if you like his answer, be sure to vot him up below!!

and WAY 3 is what I’m attempting now and should be the most user friendly and flashy. I’ll post back once I get it to work correctly!

Answer 1

EDIT

(Subsequent EDIT: added a timeout to hide after only a mouseover on the show login element, plus some other updates.)

While I still think using mouseenter and mouseout to handle a login form is not the right way to go from a usability perspective, below is code that demonstrates what Jim Jeffers is describing and attempts to handle some of the pitfalls of the approach:

var setuplogindisplay = function(){
    var $loginbox = $('#loginBox'),
        $loginshow = $('#loginShow'),
        $logincontainer = $('#loginContainer'),
        $cancellogin = $('#cancelLogin'),
        keeptimeout,
        closetimeout;

    var keepDisplay = function(){
        clearAllTimeouts();
        keeptimeout = setTimeout(loginHide, 2000);
    };

    var loginDisplay = function(){
        clearAllTimeouts();
        if ($loginbox.is(':hidden')) {
            $loginbox.fadeIn();
        }
    };

    var loginHide = function(){
        clearAllTimeouts();
        if ($loginbox.is(':visible')) {
            if (!$(this).is('#cancelLogin')) {
                closetimeout = setTimeout(function(){
                    $loginbox.fadeOut();
                }, 1500);
            } else {
                $loginbox.fadeOut();
            }
        }
    };

    function clearAllTimeouts() {
        if (keeptimeout) {
            clearTimeout(keeptimeout);
        }
        if (closetimeout) {
            clearTimeout(closetimeout);
        }
    }

    $loginshow.mouseover(loginDisplay);
    $loginshow.mouseout(keepDisplay);
    $logincontainer
        .mouseout(loginHide)
        .children()
            .mouseover(loginDisplay)
            .mouseout(keepDisplay);
    $cancellogin.click(loginHide);
};

$(document).ready(setuplogindisplay);

http://jsfiddle.net/j4Sj5/19/

Note, you have to make concessions to handle the fact mouseouts will fire when you mouse over elements within the #logincontrol element. I handle this by having them loginDisplay() on mouseenter event (it will work on mouseout, but it makes more logical sense on mouseenter).

---

I would keep in mind usability of the form when trying to access it and try not to get too clever or over-engineer the user experience. Consider:

<input type="button" id="cancelLogin" value="Cancel" />

Use this to close/hide the form, not an action on another element. If you put the close form action on an event like mouseout, you’re going to aggravate your users when they move the mouse accidentally or intentionally out of the way, only to find the login form was closed when they did so. The form, IMO, should have the control which fires the event to hide it according to the user’s choice.

<span id="loginButton">Show Login</span>
<div id="loginBox">                
    <label for="email_B">Email Address</label>
    <input type="text" name="email_B" id="email_B" />
    <label for="password">Password</label>
    <input type="password_B" name="password_B" id="password_B" />
    <input type="submit" id="login" value="Sign in" />
    <input type="button" id="cancelLogin" value="Cancel" />
    <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
    <span><a href="#">Forgot your password?</a></span>
</div>

$(document).ready(function(){
    var $loginbox = $('#loginBox'),
        $button = $('#loginButton'),
        $cancellogin = $('#cancelLogin');

    var loginDisplay = function(){
        $loginbox.fadeIn();
    };

    var loginHide = function(){
        $loginbox.fadeOut();
    };

    $button.click(loginDisplay);
    $cancellogin.click(loginHide);
});

http://jsfiddle.net/j4Sj5/4/