[学习笔记]利用sass循环解决移除hover时z-index变小而置于下层的问题

项目需求：

有从周一至周日的排课列表，当鼠标经过某一课程时，显示该课程的边框和详情（下简称详情），效果如下：

因为这个详情是课程item的子标签，所以给详情设置z-index没有用，因此在hover时，我给该课程item的z-index提高，就可以实现目前选中的课程和详情的层级要高于周围课程的层级。

按理说这样就结束了，但是当我添加了transition动画效果，就出现了另外一个问题。

可以看到，当鼠标移开选中的课程时，详情瞬间被压在其他课程底部。这是因为移开鼠标时，其他效果可以受到transition的控制，而z-index的改变是瞬间的，于是z-index立刻变低层级，而动画效果却刚刚开始，所以就会出现这种情况。

目前我的解决方案是用sass的for循环，实现左边的层级高于右边的层级，上边的层级高于下边的层级，使得详情保持在可显示的上层。

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。 

详情参考sass文档https://www.sass.hk/docs/

    @for $i from 1 through 7 {   //先循环周数，即左侧层级高于右侧
      .col:nth-of-type(#{$i}){   //列
        z-index: 7-$i;
        @for $j from 1 through 24 {  //再循环每一列的课程，上边层级高于下边层级
          .box:nth-of-type(#{$j}){  
            z-index: 24 - $j;
          }
        }
      }
    }

 最终效果：

应该还有其他更优的解决方案，欢迎大佬指点。