jquery event capture

Question

i have some images loaded viad load method, something like this:

<ul>
   <li><img src="1" alt="" /></li>
   <li><img src="2" alt="" /></li>
</ul>

on mouseover i want to append a div inside that <li> with a greater z-index than the img so that div comes "in front" of the image(like a bar with links for image editing).On mouseout i want it to disappear. anyway...the problem is that those images are constantly changed (loaded via load method) and i tried something like this:

$('img').live('mouseover',function(){
    $(this).append('<div>links links</div>');
});

$('img').live('mouseout',function(){
    $('div').remove()
});

so...the actual problem is that when the mouse leaves the image area and comes on the div area..the div disappear and appear continuously so i can't click the links inside.Remember that the div comes "over" the image(you know what i mean...it's a classic effect by now). so..how should i do it right? thanks

Answer 1

Take a look at parent()

http://docs.jquery.com/Traversing/parent

EDIT: parent doesn't work with live, my bad. How about this:

$('li').live('mouseover',function(){
    $(this).children().hide();
    $(this).append('<div>links links</div>');
});

$('li').live('mouseout',function(){
    $('div').remove();
    $(this).children().show();
});

Answer 2

Bind your event to the li instead of the img. That way, the mouseout event will only fire when the cursor leaves both the div and the img.

Answer 3

Depending on your browser compatibility requirements, you could just do this with css using :hover.

Include both the img tag and the div tag as you want them in your markup, then use css like so:

ul li div {
  display: none;
}

ul li:hover div{
  display: block;
}

For the positioning of the div over the img tag it really depends on the rest of your page layout. If the images are always the same dimensions you could use negative margin offsets with pixel positioning of the div.

You can also achieve some nice fading effects on webkit based browsers if you use the opacity setting:

ul li div {
  opacity: 0;
  -webkit-transition: opacity .33s linear;
}

ul li:hover div{
  opacity: 1;
}