如何在悬停时临时更改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恢复为原始的z-index.

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

处理这种情况的最佳方法是什么？产品的"原始"状态类似于z-index = 0,z-index = 1,z-index = 2等.

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

UPDATE

澄清: 在正常情况下我可以.product:hover在css中使用,但在这种情况下它将没有效果,因为z-index在每个产品上都是内联设置的(并且它必须是这样的)

Answer 1

你为什么不使用simpe css？

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

它只会在悬停时更改z-index,并在鼠标移出时返回其先前的状态.

编辑

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