Just dipping my toes into the world of JQuery.. only about 2 hours in. Started working on a drop-down menu for a login box that looks like this: HTML:
<button id="loginButton">Login</button>
When you hover over the button, this JQuery function is triggered:
$('#loginButton').on('mouseover', function() {
displayLoginBox();
});
function displayLoginBox(){
$('#loginBox').fadeIn();
}
$('#loginButton').on('mouseout', function() {
hideLoginBox();
});
function hideLoginBox(){
$('#loginBox').fadeOut();
}
Following that, an HTML DIV element 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>
The CSS styling for this DIV is as follows:
#loginBox {
position:absolute;
top:70px;
right:100px;
display:none;
z-index:1;
}
Although it functions, the behavior isn't optimal. How can I ensure that the login box remains visible even when the mouse hovers inside it, and only fades away once the mouse leaves the box?
Apologies if my code isn't great. Appreciate any help!
--------------------------------EDITS AKA the ANSWERS-------------------- For those who come across this in the future, there are various ways to achieve the desired interaction based on user preferences.
Here's one approach...where the login box disappears only when the mouse exits the login button. This quick fix is credited to elclanrs, make sure to upvote their answer below if you find it helpful.
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);
}
Another option is to add a cancel button as suggested by Jared Farrish here: http://jsfiddle.net/j4Sj5/4/ If you find his solution helpful, don't forget to give him an upvote below!!
I'm currently working on WAY 3, aiming for a more user-friendly and visually appealing solution. Will update once I have it functioning smoothly!