CODEWITHSUNDEEP
jqueryevent-bubbling
glabus
glabus

Reputation: 1

Event bubble problem (I guess..!)

I have a big DIV #bigdiv. When I hover it, I want a small informative DIV #info to appear inside the big div. Problem: when I put my mouse on #info (once I made it appear by hovering #bigdiv) it makes it (#info) appear and disappear infinitely. Here's my code :

jQuery('#bigdiv').live("hover", function(){ 
    jQuery("#info").toggle();
});

Update

I tried mashappslabs's solution (mouseenter/mouseleave), and I tried T.J. Crowder's one (not to use live()) : same result.

In both cases the small div still shows up and disappear forever.

Upvotes: 0

Views: 407

Answers (3)

Ady Ngom
Ady Ngom

Reputation: 1302

Use mouseenter and mouseleave, check working example at http://jsfiddle.net/2aCJ2/ and here is the code: CSS:

#big {width: 500px; height:500px; border: 1px solid #ccc; padding: 10px;}
#info {display: none; border: 2px solid #ddd;}

HTML:

<div id="big">
 <div id="info">
    <p>Hello I'm visible</p>
 </div>
</div>

jQuery:

$("#big")
.mouseenter(function(e) {
    $("#info").show();
})
.mouseleave(function(e) {
    $("#info").hide();
});

Hope it helps. Cheers

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074266

It looks like a minor bug in the live version of hover. Contrast this example, using live, with this one using an event handler actually on bigdiv (the counter is there so we know when things are changing). The issue is when you move the mouse into the info div (the word "info") and out of it (still within bigdiv). So the answer may be not to use live, although I'm guessing you have a reason for using live and so that may be inconvenient.

You may know that hover is basically just a combination of mouseenter and mouseleave (which are IE-specific events, but jQuery emulates them on browsers that don't provide them). But mouseenter and mouseleave don't bubble; that's part of why they're useful. The related (and not IE-specific) mouseover and mouseout events bubble, though, so this looks like it might be is a bug in the mouseenter / mouseleave emulation that's specific to delegated handling. (Edit: Specifically, bug #9069, which has already been reported and is being actively worked on.)

Upvotes: 1

kobe
kobe

Reputation: 15835

@glabus

make #info position absolute

#info{
position:absolute;
top: 20px;
left:40px;
}

you can dynamically set top and left with jquery.css also

Upvotes: 0

Related Questions