当 CSS transition-delay 遇到目标色与初始色相同时，浏览器会跳过过渡（包括延迟），导致“延迟未重置”假象；本文提供基于事件监听的 JavaScript 方案，精准维持最后 hover 块的背景色并实现即时切换。
当 css `transition-delay` 遇到目标色与初始色相同时，浏览器会跳过过渡（包括延迟），导致“延迟未重置”假象；本文提供基于事件监听的 javascript 方案，精准维持最后 hover 块的背景色并实现即时切换。
在实现“悬停即变色、移出后保持最后悬停色”的交互效果时，许多开发者尝试仅用纯 CSS（如 :has() + transition-delay）实现，但会遇到一个关键限制：当 CSS 过渡的目标值与当前计算值完全一致（例如都为 lightgreen），浏览器将跳过整个过渡过程——包括 transition-delay 的重置逻辑。这正是原问题中从 Block 2 移出再进入 Block 1 时延迟失效的根本原因：.main 的背景色在移出瞬间被 CSS 规则回退为默认 lightgreen，而再次 hover Block 1 时，background 值未发生改变，因此 transition-delay: 1ms 不触发。
✅ 推荐方案：JavaScript 驱动状态管理
相比依赖 CSS 过渡时机的脆弱逻辑，使用 JavaScript 显式控制背景色赋值，可彻底规避“相同颜色跳过过渡”的陷阱，并确保每次 mouseenter 都强制应用新样式：
<div class="main">
<div class="hover-container">
<div class="block">1</div>
<div class="block">2</div>
</div>
</div>.main {
border: 5px solid teal;
width: 500px;
aspect-ratio: 2 / 1;
position: relative;
background: lightgreen; /* 初始色 = Block 1 色 */
transition: background 0.3s ease; /* 统一启用平滑过渡 */
}
.hover-container {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 1fr;
}const container = document.querySelector(".hover-container");
const block1 = document.querySelector(".block:first-child");
const block2 = document.querySelector(".block:last-child");
// 每次悬停 Block 1 → 立即设为 lightgreen（含过渡）
block1.addEventListener("mouseenter", () => {
container.style.background = "lightgreen";
});
// 每次悬停 Block 2 → 立即设为 lightyellow（含过渡）
block2.addEventListener("mouseenter", () => {
container.style.background = "lightyellow";
});? 关键点说明：
container.style.background直接写内联样式，优先级高于 CSS 规则，确保状态不被意外覆盖；transition定义在.main上而非动态添加，避免重复声明导致的渲染抖动；- 移出（
mouseleave）无需处理——因我们只响应悬停动作，颜色一旦设置即保持，天然满足“保留最后悬停色”需求；- 若需支持触屏设备，可补充
touchstart事件监听（addEventListener('touchstart', ...)）。
⚠️ 注意事项与进阶建议
-
不要混合 CSS
:hover和 JS 控制：若同时存在.main:hover { background: ... }，可能与 JS 写入的内联样式冲突，建议移除所有相关伪类规则； -
性能优化：对于高频交互场景，可使用
requestAnimationFrame批量更新（本例简单场景无需）； -
可访问性增强：为
.block元素添加tabindex="0"并监听focus/blur，支持键盘导航用户； -
CSS 自定义属性扩展：若需多主题支持，可将颜色存为
--active-color变量，JS 中通过element.style.setProperty('--active-color', ...)动态更新。
该方案以最小侵入性解决核心矛盾：用明确的状态驱动替代隐式的 CSS 过渡判定，既稳定可靠，又易于维护和扩展。
立即学习“Java免费学习笔记（深入）”；
