:hover仅临时应用CSS样式，不触发JS逻辑、不发请求、不修改DOM；真正执行JS需用mouseenter/mouseleave事件；transition动画依赖属性值变化且须定义在常态规则中。
HTML中:hover伪类到底触发什么
:hover 本身不“触发”任何动作，它只是 CSS 的一个状态选择器，只在鼠标指针位于匹配元素上时，**临时应用其内部声明的样式规则**。它不执行函数、不发请求、不修改 DOM 结构，也不产生事件对象。
常见错误现象：document.addEventListener('hover', ...) 报错，因为根本不存在名为 hover 的 DOM 事件；element.onhover = ... 无效，JS 中没有这个属性。
真正能触发 JS 逻辑的是 mouseenter 和 mouseleave —— 它们才是浏览器派发的真实事件。如果你需要在悬停时加载数据、播放音频、切换 class 或控制动画播放状态，必须监听这两个事件。
transition 动画靠什么启动
transition 不是独立动画系统，它只响应**CSS 属性值的变化**。只要某个可过渡的属性（如 background-color、transform、opacity）在两个状态间发生改变，且该属性已被 transition 声明覆盖，动画就自动开始。
立即学习“前端免费学习笔记（深入）”；
典型配合方式就是 :hover + transition：
.btn {
background-color: #4a90e2;
transition: background-color 0.25s ease, transform 0.2s ease;
}
.btn:hover {
background-color: #357abd;
transform: translateY(-2px);
}
关键点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
transition必须写在**基础样式块里**（即非:hover内），否则悬停时属性变化不会过渡 - 只对「可动画化」的 CSS 属性生效；
display、height、width等会触发重排的属性慎用 - 多个属性过渡建议合并书写：
transition: transform 0.2s, opacity 0.15s，比分开写两个transition更稳定 - 避免用
transition: all 0.3s，它可能意外过渡你不希望动的属性（比如box-shadow模糊度突变）
表格悬停失效的三个真实原因
给 <table> 写 :hover 几乎总是无效，不是语法错，而是渲染机制问题：
- 鼠标实际悬停在
<td> 或 <tr> 上，<table> 本身没有内容区域可“悬停”，尤其空表或 border-collapse: collapse 时热区极小
-
tr:hover { background: #eee } 看似写了，但被 td 自身的 background-color 覆盖——表格中单元格背景默认遮挡行背景
- CSS 优先级不够：如果
td 有内联样式或更具体的选择器（如 table.data tr td），tr:hover 规则会被忽略
正确做法是：
tr:hover td,
tr:hover th {
background-color: #f0f8ff;
}
这样直接作用于单元格，绕过层级遮挡，也无需改 HTML 结构。
移动端 hover 效果为什么“时有时无”
iOS Safari 和 Android Chrome 在触摸设备上对 :hover 的支持是模拟的、延迟的、且不持续的：
- 首次点击某元素后，该元素可能短暂应用
:hover 样式（约 300–500ms），之后立即恢复
- 没有“持续悬停”概念，手指离开即失效；无法实现下拉菜单常驻展开等依赖 hover 的交互
- 某些 WebView（如微信内置）甚至完全禁用
:hover，除非用户主动点击过页面
所以：
不要把关键功能（如显示操作按钮、展开导航）绑在 :hover 上；移动端必须用 click 或 touchstart + class 切换来兜底；若坚持统一交互，可用 JavaScript 监听 mouseenter/touchstart 并加标记类，再用 CSS 针对该类写样式。
最易被忽略的一点：即使桌面端调试完美，will-change: transform 这类优化在移动端反而可能增加内存开销，而 pointer-events: none 父层会彻底切断所有子元素的 hover 和事件——这种干扰很难一眼发现，得靠 DevTools 的 Computed 面板逐层查 pointer-events 值。
给 <table> 写 :hover 几乎总是无效，不是语法错，而是渲染机制问题：
- 鼠标实际悬停在
<td>或<tr>上，<table>本身没有内容区域可“悬停”，尤其空表或border-collapse: collapse时热区极小 -
tr:hover { background: #eee }看似写了，但被td自身的background-color覆盖——表格中单元格背景默认遮挡行背景 - CSS 优先级不够：如果
td有内联样式或更具体的选择器（如table.data tr td），tr:hover规则会被忽略
正确做法是：
tr:hover td,
tr:hover th {
background-color: #f0f8ff;
}
这样直接作用于单元格，绕过层级遮挡，也无需改 HTML 结构。
移动端 hover 效果为什么“时有时无”
iOS Safari 和 Android Chrome 在触摸设备上对 :hover 的支持是模拟的、延迟的、且不持续的：
- 首次点击某元素后，该元素可能短暂应用
:hover样式（约 300–500ms），之后立即恢复 - 没有“持续悬停”概念，手指离开即失效；无法实现下拉菜单常驻展开等依赖 hover 的交互
- 某些 WebView（如微信内置）甚至完全禁用
:hover，除非用户主动点击过页面
所以：
不要把关键功能（如显示操作按钮、展开导航）绑在 :hover 上；移动端必须用 click 或 touchstart + class 切换来兜底；若坚持统一交互，可用 JavaScript 监听 mouseenter/touchstart 并加标记类，再用 CSS 针对该类写样式。
最易被忽略的一点：即使桌面端调试完美，will-change: transform 这类优化在移动端反而可能增加内存开销，而 pointer-events: none 父层会彻底切断所有子元素的 hover 和事件——这种干扰很难一眼发现，得靠 DevTools 的 Computed 面板逐层查 pointer-events 值。
