如何在HTML中限制hover悬停效果时长，3秒后恢复原样式？

你当前代码里用的.hover:active是点击激活状态，并非鼠标悬停（:hover）状态，先修正这个基础问题，再通过以下方案实现悬停时长限制的需求——纯CSS无法直接控制:hover状态的持续时长（只要鼠标停留在元素上，CSS的:hover样式会一直生效），因此推荐用JavaScript精准控制。

方案一：JavaScript控制（推荐） #

这种方式既能在鼠标悬停时触发样式变化，也能确保3秒后自动恢复原样式，同时支持鼠标提前离开时立即重置样式。

<div class="hover-target">Hover me!</div>

<style>
.hover-target {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: green;
  transition: background 0.3s ease; /* 添加入场过渡，提升体验 */
}

.hover-target.hover-active {
  background: red;
}
</style>

<script>
const hoverElement = document.querySelector('.hover-target');
let hoverTimer;

// 鼠标进入时触发样式变化并启动定时器
hoverElement.addEventListener('mouseenter', () => {
  hoverElement.classList.add('hover-active');
  hoverTimer = setTimeout(() => {
    hoverElement.classList.remove('hover-active');
  }, 3000);
});

// 鼠标离开时立即清除定时器并恢复原样式
hoverElement.addEventListener('mouseleave', () => {
  clearTimeout(hoverTimer);
  hoverElement.classList.remove('hover-active');
});
</script>

方案二：纯CSS模拟（有局限性） #

如果不想使用JavaScript，可以用CSS动画模拟，但这种方式无法响应鼠标提前离开的情况——只要触发一次悬停，动画会完整跑完3秒才恢复样式，重复悬停会重置动画。

<div class="hover-target">Hover me!</div>

<style>
.hover-target {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: green;
}

.hover-target:hover {
  animation: hoverLimit 3s forwards;
}

@keyframes hoverLimit {
  0%, 99.9% { background: red; }
  100% { background: green; }
}
</style>

内容的提问来源于stack exchange，提问作者Nurvy Gamedev