How do I temporarily change the z-index?

Question

I have several products overlapping each other with z-index.

I have 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_idand prod_zindex- global variables

What I want to do is that the hovering product must be installed at the highest z index, but when I move away from it, I want the changed z-index to be restored to the original one on it.

Obviously I'm doing something wrong. I suppose because I cannot control in which order the mouseover / mouseout events will be executed.

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

Please give me hints / pointers ...

UPDATE

: .product:hover css, , z- inline ( )

Answer 1

simpe css ?

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

z , .

Edit

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