Hover Stickiness?

Hover Stickiness?

Hi all,

Green-as-can-be newbie here.  I'm having trouble figuring out a couple of things and could really use a point in the right direction.

I'm trying to set up the following:

1.  Have flexibility to set up an href link anywhere on a page (always contained within a div).
2.  On mouseover, a hidden div below the link slides down.  You can then move your cursor onto the newly opened div.  Both it and the link above should show the open/hover state.
3.  Mouse out, and the div slides back up out of sight, and the link goes back to a regular link state.

I've searched around for code and found something sort of similar.  I've altered it a bit, and it's working fine except for the following problems:

1.  The "hover" state doesn't stick for the link, and the opened div won't stay open when you move your cursor onto it.

2.  I've noticed that when I approach the link from below, I get a quick double-open of the sliding div.  If I approach from the top, left, or right, no problem.

Can anyone help give me a friendly shove?

Here's my feeble attempt at newbie coding:

  1. <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
    html,body {margin:0;padding:0;border:0}

    a.toplink:link, a.toplink:visited {
        text-decoration:none;
        font-size:bold
    }

    a.toplink:active {
        background-color:#000;
        text-decoration:none;
        color:#fff
    }

    a.toplink:hover {
        background-color:#000;
        text-decoration:none;
        color:#fff
    }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
       
            $(document).ready(function() {
       
            $("#slidedown").hover(function() {
       
            $("div#sliding-div").slideDown(400);
       
                }, function() {
       
            $("div#sliding-div").slideUp(400);
           
            });
        });
       
    </script>
    </head>
    <body>

        <div style="width:400px;height:30px;line-height:30px;background-color:#efefef">
       
            <a href="#" id="slidedown" class="toplink" style="padding:13px 25px 14px 25px;width:100%;height:30px;line-height:30px;font-size:13px;text-align:center">Mouseover Me</a>
           
        </div>
        <div id="sliding-div" style="display:none;position:absolute;top:30px;width:400px;height:200px;background-color:black;color:white">
            This is test text
        </div>

    </body>
    </html>






















































Thanks for any help.





















    • Topic Participants

    • johnl