CSS3 Transitions — Как отложить сброс свойства z-index?

По сути, класс «подсветки» добавляется к элементам с классом «край» динамически через javascript при вводе мыши. Класс выделения удаляется при выходе из мыши. Я хочу изменить цвет границы этих элементов. Однако этот класс «подсветки» также изменяет порядок стека. Я хочу, чтобы z-индекс 1 был установлен на всех выделенных краях до начала перехода (при входе мыши), и я хочу, чтобы z-индекс 1 удалялся после завершения перехода (при выходе из мыши). В настоящее время свойство z-index сбрасывается сразу после удаления класса «highlight».

Базовая настройка:

.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, 1s;

    transition-property: border-color, z-index;
    -moz-transition-property: border-color, z-index;
    -o-transition-property: border-color, z-index;
    -webkit-transition-property: border-color, z-index;
}

Мы очень ценим любую помощь. Заранее спасибо.

edit:Пожалуйста, имейте в виду, что пользователь может вводить/убирать мышь на нескольких разных краях, прежде чем переходы смогут завершиться. Спасибо.