jQuery Mouseenter and mouseleave actions

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,开发者_StackOverflow中文版 but when the user moves out of the hyperlink and over the DIV itself, the DIV also disappears.

How should I fix this?

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/

If I understood right, rewriting

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

Might help, since it stops the current animation (fading out) and fades it back in (if it has already turned a bit transparent).

However this depends on your HTML, and might not work in your case, so please post the structure also.

I am very late to this party - but there is a far better way to do this, so I want to add it for the sake of future browsers. You don't need jQuery for this effect at all.

First, wrap the two items in a container (here I'm using a div with class container), and apply a class to the item you want to appear/disappear on hove (here I'm using the show-on-hover class on the #divId element)

<div class="container">
  <a id="hlDiv" href="...">link text</a>
  <div class="show-on-hover" id="divId">popup stuff</div>
</div>

Next, set up your CSS as follows:

.container > .show-on-hover { display: none; }
.container:hover > .show-on-hover { display: block; }

#divId { /* whatever styles you want */ }

The effect is that the hover is now controlled entirely by CSS - but, it doesn't have the 1s transition you originally had. This is a little more complicated (and currently doesn't work in IE - but will be supported as of IE10).

Simply change the CSS as follows:

.container { position: relative; }
.container > .show-on-hover { opacity: 0.0; position: absolute; }
.container:hover > .show-on-hover { opacity: 1.0; }

.show-on-hover {
    -webkit-transition: opacity 1s; /* Chrome / Safari */
    -moz-transition: opacity 1s;    /* Firefox */
    -o-transition: opacity 1s;      /* Opera */
}

The relative positioning on the .container means that the container sets its own bounding boxes for its child elements and their positioning. This means that when you then set the > .show-on-hover styling to position: absolute;, it will still be constrained to its parent (if you set left: 0; as an example, it will move to the left edge of the .container, rather than the screen).

The opacity toggle now simply makes the absolutely positioned item show/disappear wherever you've placed it (and you would update the CSS to put it exactly where you want, relative to the hyperlink). Because we're no longer using display: none - the DIV will always take up space on the screen - even when hidden (which is probably not what you want).

Finally - the last block, which sets transitions, tells modern browsers that whenever the opacity changes on elements of class .show-on-hover, make that change happen as a tween over 1s of duration.

Here is a jsFiddle showing the transitions: http://jsfiddle.net/TroyAlford/nHrXK/2

And here is a jsFiddle showing just the toggle: http://jsfiddle.net/TroyAlford/nHrXK/3/