Задержка перехода не сбрасывается при наведении курсора, если цвет перехода такой же, как исходный цвет. ⇐ CSS

[Anonymous]

Учитывая код — https://codepen.io/jonny-b31/pen/ExzPypw

• Я создал контейнер с двумя блоками и когда я навожу на них курсор, мне приходится соответствующим образом обновлять фон. По умолчанию был установлен цвет блока 1.
• Когда я наводил курсор, я хотел сохранить последний наведенный цвет. Итак, в качестве хака я добавил задержку перехода, чтобы она выглядела так, как будто она сохраняет последний цвет при наведении, а при наведении я сбрасываю задержку перехода, чтобы немедленно переключать цвета.
  
  < li>Однако, когда я выхожу из блока 2 наружу, а затем перехожу к блоку 1, задержка перехода не сбрасывается. Я предполагаю, что при выходе за пределы контейнера цвет переключается обратно на цвет по умолчанию, который является цветом блока 1, и когда я перемещаю курсор к блоку 1, он снова видит тот же цвет и каким-то образом не применяет задержку сброса при наведении. Но я не могу понять, как это исправить.
  
  Здесь приведен пример кода и код:

Код: Выделить всё

1
2




.main {
border: 5px solid teal;
width: 500px;
aspect-ratio: 2 / 1;
position: relative;
background: lightgreen;
transition: background 1ms linear;
transition-delay: 2s;
}
.hover-container {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
.main:has(.block:first-child:hover) {
transition-delay: 1ms;
background: lightgreen;
}

.main:has(.block:last-child:hover) {
transition-delay: 1ms;
background: lightyellow;
}

• Похоже, причина в том, что задержка перехода не сбрасывается, когда мы меняем цвет на тот же, который был изначально. Пробовал некоторые вещи, например, добавление всего свойства перехода при наведении курсора. снова, но безрезультатно.

Подробнее здесь: https://stackoverflow.com/questions/784 ... as-initial