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?

Are the elements DLDIV and DIVID next to each other on the page ? — Russ Clarke, Jul 18 '11 at 09:18
Whut... care to slap an example on jsFiddle.net, including your HTML (that bit is important too). — Ben Everard, Jul 18 '11 at 09:19
@Russ C , the hlDiv is inside another div and above that div the divid comes. like
... ... — aeciftci, Jul 18 '11 at 09:20
@aeciftci plaes post an examplke on jsfiddle.net as Ben suggested — Nicola Peluchetti, Jul 18 '11 at 09:21
http://jsfiddle.net/w68YX/2/ this is jsfiddle link, it is not working now so think as a template the script — aeciftci, Jul 18 '11 at 09:29

score 1 · Accepted Answer · answered Jul 18 '11 at 09:46

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/

answered Jul 18 '11 at 09:46

Nicola Peluchetti

76,206
31
145
192

Ok @Nicola, thank you this worked. But i want a more efficient way because there are some extra hyperlinks with the hlDiv and they are in same container too, so I need to seperate the hlDiv from them but how? – aeciftci Jul 18 '11 at 09:58
I edited the fiddle: look here http://jsfiddle.net/w68YX/13/ but i really do think you should use a container – Nicola Peluchetti Jul 18 '11 at 10:24
last fiddle is not working properly :), but i guess i will go after the container idea too, thank you so much for saving me from some trouble, have a good life. – aeciftci Jul 18 '11 at 10:31

score 0 · Answer 2 · answered Mar 07 '13 at 18:20

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/

score 0 · Answer 3 · answered Jul 18 '11 at 09:23

0

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.

answered Jul 18 '11 at 09:23

zatatatata

4,761
1
20
41

jsfiddle.net/w68YX/2 this is the structure, not so complex. – aeciftci Jul 18 '11 at 09:31

jQuery Mouseenter and mouseleave actions

3 Answers3