Given the codepen – https://codepen.io/jonny-b31/pen/ExzPypw

• I created a container with 2 blocks and when i hover on them, i have to update the background accordingly. By default, block 1 color was set.

• When i hover out, i wanted to keep the last hovered color. So, as a hack i added transition-delay to look like its preserving the last hover color and on hover im resetting the transition-delay to immedietely switch colors.

• However, when im hovering out from block 2 to outside, then going to block 1, the transition-delay is not resetting. My guess is that, when moving outside of container, the color is switching back to default color which is block 1 color and when i move my cursor to block 1, its seeing the same color again and somehow not applying the hover reset delay. But im not able to figure out how to fix it.
  Here the sample code and codepen is linked above:

<div class="main">
  <div class="hover-container">
    <div class="block">1</div>
    <div class="block">2</div>
  </div>
</div>
<style>

.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;
}
</style>

• The reason seems to be transition-delay is not resetting when we are changing to same color which was initially.Tried some things like adding whole transition property on hover again but no effect.