В принципе, класс "highlight" добавляется к элементам с "edge" класса динамически через javascript на mouseenter. Класс выделения удаляется на мышином фоне. Я хочу перейти к пограничному цвету этих элементов. Однако этот класс "highlight" также изменяет порядок стека. Я хочу, чтобы z-индекс 1 был установлен на всех выделенных ребрах до начала перехода (по мышиному центру), и я хочу, чтобы z-индекс 1 был удален после завершения перехода (на мышином). В настоящее время свойство z-index reset сразу после удаления класса "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;
}
Любая помощь очень ценится. Спасибо заранее.
изменить: Пожалуйста, имейте в виду, что пользователь может использовать mouseenter/mouseleave на нескольких разных краях, прежде чем переходы смогут завершить. Спасибо.