CSS周期表Hover时Z-Index切换延迟问题求助（优先非JS方案）

我为作业制作了一个简易周期表，希望为鼠标悬停的元素添加缩放动画，为此修改了该元素的Z-Index，但出现延迟现象：元素先完成缩放，再切换Z-Index。我是编程新手，从未使用过JavaScript，希望优先通过非JS方案解决该问题，若必须使用JS也愿意尝试。

核心代码 #

#container {
    margin: 0px;
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: auto;
    grid-gap: 5px;
    padding: 10px;
}

.num {
    color: rgba(255, 255, 255, 0);
    font-size: 1vw;
    transition: 100ms color ease-in-out;
}

.element {
    background-color: rgb(228, 228, 228);
    width: calc(90vw / 18);
    height: calc(90vw / 18);
    border-radius: 20%;
    text-align: center;
    z-index: 1;
    transition: 50ms scale ease-in-out;
    font-size: 3vw;
}

.element:hover{
    z-index: 2;
    scale: 2;
}

.element:hover .num {
    z-index: 2;
    scale: 1;
    color: rgba(0, 0, 0, 0.7);
}

完整样式代码 #

* {
    word-wrap: break-word;
    font-weight: normal;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgba(0, 0, 0, 0.7);
}

#container {
    margin: 0px;
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: auto;
    grid-gap: 5px;
    padding: 10px;
}

.num {
    color: rgba(255, 255, 255, 0);
    font-size: 1vw;
    transition: 100ms color ease-in-out;
}

.element {
    background-color: rgb(228, 228, 228);
    width: calc(90vw / 18);
    height: calc(90vw / 18);
    border-radius: 20%;
    text-align: center;
    z-index: 1;
    transition: 50ms scale ease-in-out;
    font-size: 3vw;
}

.element:hover{
    z-index: 2;
    scale: 2;
}

.element:hover .num {
    z-index: 2;
    scale: 1;
    color: rgba(0, 0, 0, 0.7);
}

.blankr1 {
    opacity: 0%;
    grid-column: span 16;
}

.blankr2 {
    opacity: 0%;
    grid-column: span 10;
}

.blankExtra1 {
    grid-column:span 1;
    opacity: 0%;
}

.blankExtra2 {
    opacity: 0%;
    grid-column: span 1;
}

.reactiveNonMetals {
    background-color: rgb(193, 233, 178);
}

.alkaliMetals {
    background-color: rgb(255, 152, 152);
}

.alkaliEarthMetals {
    background-color: rgb(255, 203, 136);
}

.transistionMetals {
    background-color: rgb(182, 182, 254);
}

.postTransMetals {
    background-color: rgb(174, 126, 220);
}

.metalloids {
    background-color: rgb(255, 241, 118);
}

.nobelGases {
    background-color: rgb(253, 189, 199);
}

.longer {
    font-size: 1.6vw;
}

.lanthanides {
    z-index: 1;
    background-color: rgb(103, 103, 255);
    color: white;
}

.actinides {
    z-index: 0;
    background-color: rgb(166, 220, 202);
}

#container2 {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: auto;
    grid-gap: 5px;
    margin-top: 40px;
}

元素类（element）嵌套在容器（container）div内，数字类（num）嵌套在元素div内。

解决方案 #

优先非JS方案 #

方案1：给z-index添加过渡动画

默认z-index不支持过渡，但可以通过指定过渡函数让它和缩放动画同步触发。修改.element的过渡属性：

.element {
    /* 保留原有属性 */
    transition: 50ms scale ease-in-out, 50ms z-index step-end;
}

step-end会让z-index在过渡周期结束时立即切换，和缩放动画时长一致，视觉上就会同步。

方案2：设置元素为相对定位

Grid布局中元素默认是静态定位，z-index作用受限。给.element添加position: relative，让z-index层级变化及时生效：

.element {
    /* 保留原有属性 */
    position: relative;
}

加上后，z-index切换会和缩放动画同步，不会出现延迟。

优化点：移除子元素冗余z-index

.num是.element的子元素，会继承父元素的层级，无需单独设置z-index: 2，删掉.element:hover .num里的该属性即可。

可选JS方案（仅CSS方案无效时使用） #

如果上面的CSS方法没解决，用简单JS监听鼠标事件同步修改样式：

const elements = document.querySelectorAll('.element');
elements.forEach(el => {
    el.addEventListener('mouseenter', () => {
        el.style.zIndex = '2';
        el.style.scale = '2';
    });
    el.addEventListener('mouseleave', () => {
        el.style.zIndex = '1';
        el.style.scale = '1';
    });
});

把这段代码放在HTML的</body>标签前即可。

内容的提问来源于stack exchange，提问作者JanCi