Jquery 如何在悬停时临时更改z索引？

我有几个产品相互重叠的z指数

我试过这个

$(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\u id

和

prod\u zindex

是全局变量

我想做的是，悬停的产品应该设置为最高的z索引，但当我离开这个位置时，我希望更改的z索引恢复到原来的状态

显然我做错了什么。我想这是因为我无法控制mouseover/mouseout事件的执行顺序

处理这种情况的最佳方法是什么？产品的“原始”状态如z-index=0、z-index=1、z-index=2等

请给我任何提示/指示

更新

澄清：

---

在正常情况下，我可以在css中使用

.product:hover

，但在这种情况下，它没有任何效果，因为z索引是在每个产品上设置的（必须是这样）

为什么不使用simpe css呢

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

它将仅在鼠标悬停时更改z索引，并在鼠标移出时返回到以前的状态

编辑

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

---

啊。请原谅我没有提到那件事。这取决于产品divs具有内联的z-索引集这一事实，而且它必须是内联的，因此css将不幸地不会产生任何影响！这很重要。肯定会做作的。当然我真蠢；-）谢谢大家！