jQuery Mouseenter and mouseleave actions

Question

I am using the following jQuery script:

$("#divid").mouseenter(function() {
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);
});
$("#hldiv").mouseenter(function() {
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);   
});

As you can see, when the mouse hovers over a hyperlink called #hldiv, the #divid should be shown. The main goal is to keep the DIV shown if the mouse is over the DIV - but the #divid should not be visible initially.

If the mouse moves over the hyperlink, the DIV should appear, and when the mouse then moves over the DIV, it should stay until the mouse leaves.

The problem is that with my current code, when the user moves over the hyperlink and then out - the DIV appears/disappears correctly, but when the user moves out of the hyperlink and over the DIV itself, the DIV also disappears.

How should I fix this?

Answer 1

Why don't you add a container and do:

<div id='container'>
<a ID="hlDiv">hlink</a>
<div ID="divId">Test Test Test</div>
</div>

$(document).ready(function() {
    $("#hlDiv").hover(function() {
        $('#divId').show(1000);
    })
        $('#container').mouseleave(function(){
            $('#divId').hide(1000);
        });
});

fiddle here: http://jsfiddle.net/w68YX/8/