How do I change z-index temporarily on hover?

Question

I have several products overlapping eachother with z-index.

I've tried this.

$(document).on('mouseover', '.product', function(e) { 
    prod_id = $(this).attr('id');               //Each product has an id
    prod_zindex = $(this).css('z-index');       //Store z-index when hovered
    $(this).css('z-index',50000000);
});

//Restore z-index when moving from product
$(document).on('mouseout', '.product', function(e) { 
    $('#' + prod_id ).css('z-index',prod_zindex);        
});

prod_id and prod_zindex are global variables

What I WANT to happen is that the hovered product should be set to highest z-index, but when I move away from that I want the changed z-index to be restored to it's original.

Obviously I'm doing something wrong. I guess it's because I can't control in which order the mouseover/mouseout - events are going to be executed.

What would be the best approach to handle this scenario? The "original" state of the products are like z-index=0, z-index=1, z-index=2 etc.

Please give me any hint/pointers...

UPDATE

Clarification: In normal case I could use .product:hover in css, but in this case it will have no effect because z-indexes are set inline on each and every product (and it has to be that way)

Answer 1

why dont you use simpe css for that?

.product:hover{ 
  z-index:555555;
}

It will change the z-index only on hover and return back to its previous state when mouse moves out.

Edit

  .product:hover
   {
     z-index:555555 !important;
   }