1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to have on mouse hover have login box drop down

Discussion in 'jQuery' started by robby1995, Dec 25, 2013.

  1. #1
    i am building a website and i want the login box drop down when someone hovers over the word login and if the mouse goes past it the box will disappear again, any links that will help or some code that does this will be appreciated.
    robby1995, Dec 25, 2013 IP
  2. HuggyStudios

    HuggyStudios Active Member

    Messages:
    663
    Likes Received:
    18
    Best Answers:
    21
    Trophy Points:
    90
    #2
    You can accomplish this with CSS and JavaScript pretty easily.

    Set the login box to display:none in your CSS. Then in your JavaScript file add this code. Make sure you change the ID's to match yours.

    Code (Text):
    1.  
    2. $(function() {
    3.   // show the login box when the user's mouse hovers over the login link
    4.    $('#login-link-id-here').hover(function() {
    5.       $('#login-box-id-here').show();
    6.    });
    7.   // hide the login box when the user's mouse leaves it
    8.    $('#login-box-id-here').mouseout(function() {
    9.       $(this).hide();
    10.    });
    11. });
    12.  
    I haven't tested this as I don't have enough time. That should be enough to get you started.

    Resources:
    http://api.jquery.com/hover/
    http://api.jquery.com/mouseout/
    HuggyStudios, Dec 26, 2013 IP
  3. deathshadow

    deathshadow Prominent Member

    Messages:
    5,976
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #3
    Meanwhile if your only trigger is hover, I'm wondering what the devil you are even looking at javascript for -- but again most of what people say "use jQuery" for the correct answer is "NOTHING".

    Code (Text):
    1. <form id="hoverLogin" action="login.php">
    2.     <div><a href="#hoverLogin">Login</a></div>
    3.     <fieldset>
    4.         <label for="hoverLoginName">User Name:</label>
    5.         <input type="text" name="username" id="hoverLoginName" />
    6.         <br />
    7.         <label for="hoverLoginPass">Password:</label>
    8.         <input type="text" name="password" id="hoverLoginPass" />
    9.         <br />
    10.         <input type="submit" value="Login" />
    11.     </fieldset>
    12. </form>
    The DIV is lip-service for valid code since only block-level elements can be children of FORM. The anchor and it's target are so we can make it if you click on "login" the dropdown will stay open on CSS3 browsers using :target

    Code (Text):
    1. #hoverLogin {
    2.     overflow:hidden;
    3. }
    4.  
    5. #hoverLogin fieldset {
    6.     position:absolute;
    7. }
    8.  
    9. #hoverLogin:hover,
    10. #hoverLogin:target {
    11.     overflow:visible;
    12. }
    We just APO the fieldset and then hide it with overflow:hidden. On :hover and :target make it overflow:visible. Simple... and no steenking javascript (or worse jQuery) for NOTHING needed.
    deathshadow, Dec 30, 2013 IP
    ryan_uk likes this.