当过渡颜色与初始颜色相同时，hover时transition-delay不重置问题

问题场景 #

我创建了一个包含两个区块的容器，默认背景为block 1对应的lightgreen。需求是：hover不同区块时切换对应背景色，移出hover后保留最后一次hover的颜色一段时间。我通过设置transition-delay模拟延迟回退效果——hover时重置transition-delay让颜色立即切换，但遇到异常：从block 2移出到容器外，再hover到block 1时，transition-delay未被重置，导致后续颜色切换仍受之前的延迟影响。

问题原因 #

当从block 2移出到容器外，背景会在2秒延迟后变回默认的lightgreen。此时再hover block 1，由于目标颜色和当前背景色都是lightgreen，CSS的transition没有触发状态变化，导致transition-delay的重置规则不生效，延迟仍保持2秒。

解决方案 #

给block 1的hover状态添加一个不影响视觉的CSS属性变化（比如outline-offset: 0），强制触发transition的状态更新，确保每次hover block 1时都能重置transition-delay。

修复后的完整代码 #

<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;
  /* 添加无视觉影响的属性，强制触发transition */
  outline-offset: 0;
}

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

内容的提问来源于stack exchange，提问作者Rahul Kumar Modasia