如何在悬停时临时更改 z-index？

Question

我有几个产品与 z-index 重叠。

我试过了。

$(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 和 prod_zindex 是全局变量

我希望将悬停的产品设置为最高的 z-index，但是当我离开时，我希望将更改后的 z-index 恢复到原来的值。

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

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

请给我任何提示/指针...

更新

说明： 在正常情况下，我可以在 css 中使用 .product:hover，但在这种情况下，它不会产生任何效果，因为 z-indexes 是在每个产品上都内联设置的（必须这样）

Answer 1

你为什么不使用 simpe css 呢？

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

它只会在鼠标悬停时改变 z-index 并在鼠标移出时返回到之前的状态。

编辑

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