title: How do I change z-index temporarily on hover?
body: <p>I have several products overlapping eachother with z-index.</p>
  
  <p>I've tried this.</p>
  
  <pre><code>$(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);        
  });
  </code></pre>
  
  <p><code>prod_id</code> and <code>prod_zindex</code> are global variables</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Please give me any hint/pointers...</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p><strong>Clarification:</strong>
  In normal case I could use <code>.product:hover</code> 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)</p>