当过渡颜色与初始颜色相同时，悬停时过渡延迟不会重置

Question

鉴于代码笔 - https://codepen.io/jonny-b31/pen/ExzPypw

• 我创建了一个包含 2 个块的容器，当我将鼠标悬停在它们上时，我必须相应地更新背景。默认情况下，设置了块 1 颜色。

• 当我悬停时，我想保留最后悬停的颜色。因此，作为一种黑客，我添加了转换延迟，使其看起来保留了最后的悬停颜色，并且在悬停时我重置转换延迟以立即切换颜色。

• 但是，当我从块 2 悬停到外部，然后转到块 1 时，转换延迟不会重置。我的猜测是，当移出容器时，颜色会切换回默认颜色，即块 1 颜色，当我将光标移动到块 1 时，它会再次看到相同的颜色，并且以某种方式不应用悬停重置延迟。但我不知道如何解决它。
  上面链接了示例代码和 codepen：

<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>

• 原因似乎是当我们更改为最初的相同颜色时，过渡延迟没有重置。尝试了一些方法，例如再次在悬停时添加整个过渡属性，但没有效果。

Answer 1

这是一个使用 js 完成设计的示例，考虑到

transition: none;

仅适用于您的 css 过渡。

const get = query => document.querySelector(query);

const container = get(".hover-container");

get(".block:first-child").addEventListener(
  "mouseenter", 
  () => container.style.background = "lightgreen"
);

get(".block:last-child").addEventListener(
  "mouseenter", 
  () => container.style.background = "lightyellow"
);

.main {
  border: 5px solid teal;
  aspect-ratio: 2 / 1;
  position: relative;
  background: lightgreen;
}
.hover-container {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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