Comment puis-je changer de z-index temporairement sur le vol stationnaire?

J'ai plusieurs produits qui se chevauchent eachother avec z-index.

J'ai essayé ce.

$(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 et prod_zindex sont des variables globales

Ce que je VEUX, c'est que le planait produit doit être réglé à la plus grande, z-index, mais lorsque je m'éloigne de qui je veux le changement de z-index pour être remise à l'état initial.

Évidemment, je suis en train de faire quelque chose de mal. Je suppose que c'est parce que je ne peux pas contrôler l'ordre dans lequel les mouseover/mouseout - événements vont être exécutés.

Quelle serait la meilleure approche pour gérer ce scénario? L ' "original" de l'état des produits comme le z-index=0, z-index=1, z-index=2 etc.

Merci de me donner des indices/pointeurs...

Mise à JOUR

Précisions:
Dans le cas normal, je pourrais utiliser .product:hover dans le css, mais dans ce cas, il n'aura aucun effet, parce que z-index inséré sur chaque produit (et il le faut)

OriginalL'auteur bestprogrammerintheworld | 2014-03-14