如何通过按键重置鼠标悬停变色的 div 背景颜色
本文介绍如何为多个 div 元素实现“鼠标悬停随机变色 + 按任意键一键重置”功能，解决原生 `onkeydown` 无法触发的问题，核心在于使用全局键盘事件监听与悬停状态跟踪。
在网页交互开发中，仅依赖内联事件（如 onmouseover 和 onkeydown）处理复杂行为往往受限——尤其当目标元素本身不支持键盘焦点（如默认
）时，onkeydown 根本不会触发。因此，正确做法是：将鼠标悬停逻辑与键盘响应解耦，通过 JavaScript 全局监听 keydown 事件，并结合状态变量追踪当前被悬停的元素样式对象。以下是完整、可运行的实现方案：
✅ 正确实现步骤
- 移除所有内联事件（onmouseover/onkeydown）：避免 HTML 与逻辑耦合，也规避非聚焦元素无法捕获键盘事件的问题；
- 为每个 .colorCell 绑定 mouseover 事件，记录其 style 对象并应用随机色；
- 在 document 级监听 keydown，检查是否存在已悬停的元素，若有则重置其背景色；
- 优化颜色生成逻辑：使用模板字符串提升可读性，并封装 getRandomColor() 增强复用性。
? 完整代码示例
⚠️ 注意事项与增强建议
- 焦点问题： 默认不可聚焦，因此不能直接响应 onkeydown；必须改用 document 或 window 的全局监听。
- 状态管理：使用 hoveredStyle 而非 DOM 元素本身，可直接操作样式，避免重复查询；重置后清空该变量，防止误操作。
- 用户体验优化：可扩展为按 Escape 键重置（event.key === 'Escape'），或支持 Ctrl+R 等组合键。
- CSS 兼容性：确保 backgroundColor 属性名（驼峰式）与 style 对象匹配；若需兼容旧版 IE，可补充 style['background-color'] 写法（但现代项目无需）。
通过该模式，你不仅能可靠实现“悬停变色 + 按键重置”，也为后续扩展（如多元素批量重置、动画过渡、主题切换等）打下清晰、可维护的结构基础。
