javascript - 在悬停时添加/删除z-index

当用户悬停在两个独立div上时，我正试图添加或删除它们的z-index属性。
关键是我编写了一些Jquery，这样当鼠标移动时，它就保留了z-index属性，这样就有了一个平滑的转换。https://jsfiddle.net/45wdhdjy/1/

$(".w-1").one("mouseover", function() {
  $(".w-1").addClass('permahover');
});

我的问题是在蓝色div上悬停之后，黄色div在悬停时没有更大的z索引。我觉得解决方案是将我的两个脚本合并为一个if语句，但我不确定如何进行。有人能指点我正确的方向吗？

最佳答案

好。。。我试过你的代码，这在js文件中有效

$(".w-1").on("mouseover", function() {
    $(".w-2").removeClass('permahover2');
  $(".w-1").addClass('permahover');
});

$(".w-2").on("mouseover", function() {
  $(".w-2").addClass('permahover2');
  $(".w-1").removeClass('permahover');
});

对于每个事件，删除类另一个div。