Question

I have an absolute positioned div that is shown on hover of an a. Since it is absolutely positioned at the base of the anchor (top:0; left:0), I wish to let the user to move from the anchor to the div without hiding the div.

Actually, I prepared a piece of JQuery code, but I’ve only be capable to let the div to be shown on hover. When I move from the anchor to the div, the latter is obsiously hidden.
Look at the JSFiddle to look what I did.

Thanks in advance.

Answer 1

First of all, you are over complicating everything by using javascript. You do not need it in this case, as you can just use a parent container to handle the hover action.

I would personally do it like this: http://jsfiddle.net/qLUf9/

<div class="hover_container">
    <a class="button">Click Me</a>
    <div class="container">
       This is my hover content.
    </div>
</div>

And the CSS:

a.button {
 background-color: blue;
 color: #fff;
}

.hover_container {
 position: relative:  
}

.hover_container .container {
 display: none;
 border: 1px solid #000;
 float: left;
 position: absolute;
 left: 0;
 top: 20px;
}

.hover_container:hover .container {
 display: block;
}

Please note: IE6 does not support the :hover attribute on block elements. For IE6 and below, you must use some basic javascript to add a class such as hovered to that element. You can read more about fixing the IE6 hover bug here: http://robspangler.com/blog/hover-pseudo-class-bug-fix-for-ie6/