For Statement and Img Problem

I am using the following logic in a for statement

The problem I am having is that it seems that when you hover o开发者_Python百科ver the first image - it hides 'all the images'. I want to try and preserve the [i] for each image but it seems it doesn't do this ?

function myHandler(elem, img) {
  var curImg = img;
  var curImgId = curImg.find('img');

  $(curImgId).live('click', function() {
          $(this).hide();
  });   

//Other stuff requiring preservation of [i]
}

When you hover over the first image, that image hides. This is normal.

However, your problem is the second image moves into the space previously filled by the first image, and the second image gets a mouse event, which causes that image to hide. This happens continuously until the rest of the images all disappear.

You can test this by hovering over the second image - all the images to the right disappear.

EDIT: I would second @Digital Planes answer, the second image comes in place of first one due to first one being hidden and triggers an event. Here is a working code : http://jsfiddle.net/njPdQ/8/

The change is :

function myHandler(elem, img) {

console.log(elem);

var curImg = img;
var curImgId = curImg.find('img');
console.log(img);
$(curImgId).live('mouseenter', function() {
    console.log("Event handler: Hiding " + elem);
   // $(this).hide();    
    $(this).css("visibility", "hidden"); //this will keep the images in place

});

}