小编Sha*_*ane的帖子

基本上,"highlight"类通过mouseenter上的javascript动态添加到具有"edge"类的元素.在mouseleave上删除了突出显示类.我想转换这些元素的边框颜色.但是,此"突出显示"类也会修改堆栈顺序.我希望在转换开始之前(在mouseenter上)在所有突出显示的边上设置z-index为1,并且我希望在转换完成后移除z-index为1(在mouseleave上).目前,在删除"highlight"类后立即重置z-index属性.

基本设置:

.edge {

    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;

    transition-property: border-color;
    -moz-transition-property: border-color;
    -o-transition-property: border-color;
    -webkit-transition-property: border-color;
}

.edge.highlight {
    border-color: hsl(0, 0%, 85%);
    z-index: 1;
}

第一次尝试(显然延迟修复了一端的时间并将其混淆在另一端):

.edge {
    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s, 0;
    -moz-transition-duration: 1s, 0;
    -o-transition-duration: 1s, 0;
    -webkit-transition-duration: 1s, 0;

    transition-delay: 0, 1s;
    -moz-transition-delay: 0, 1s;
    -o-transition-delay: 0, 1s;
    -webkit-transition-delay: 0, …